前言：
有時我們沒在一個組件做初始化數據的工作，只是在template下的根元素加了個v-if控制顯示，這樣一來也能達到初始化數據的目的。
但其背後的原理是什麼？
在Vue 2.x中，當你使用v-if指令將一個組件或元素的條件設置爲false，使得它在DOM中不可見時，Vue的響應式系統會進行一些優化。具體來說，當v-if的值爲false時，Vue會從DOM中移除該元素及其所有子元素，並且會“銷燬”該元素及其子元素的響應式數據。
這意味着，如果v-if控制的是根組件，那麼當條件變爲true，組件再次變得可見時，根組件的響應式數據會被重新初始化。這是因爲Vue會爲重新插入的DOM元素創建一個新的響應式數據對象。
這種行爲對於組件的生命週期鉤子也有影響。當v-if爲false時，組件的beforeDestroy和destroyed鉤子會被調用。當v-if再次變爲true時，組件的beforeCreate和created鉤子會被再次調用，就像組件被重新創建了一樣。
這裏有一個例子來說明這個過程：
<template>
<div>
<button @click="toggle">Toggle Component</button>
<ChildComponent v-if="isVisible" />
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
},
methods: {
toggle() {
this.isVisible = !this.isVisible;
}
},
components: {
ChildComponent: {
data() {
return {
count: 0;
};
},
created() {
console.log('ChildComponent created');
},
beforeDestroy() {
console.log('ChildComponent beforeDestroy');
}
}
}
};
</script>
在這個例子中，點擊按鈕切換isVisible的值會導致ChildComponent被銷燬和重新創建。每次isVisible變爲true時，ChildComponent的created鉤子都會被調用，因爲它被視爲一個新創建的組件。
因此，如果你依賴於組件的響應式數據在v-if切換時保持不變，你可能需要考慮使用其他解決方案，如v-show（它只是簡單地切換元素的CSS display屬性，而不會影響組件的生命週期或響應式數據），或者使用組件的key屬性來管理組件的重新渲染。
在Vue 3中，v-if和v-show的行爲與Vue 2.x有所不同，尤其是在組件的生命週期和響應式數據的處理上。Vue 3引入了Composition API，這改變了處理組件狀態和邏輯的方式。
對於v-if：
在Vue 3中，如果你使用v-if來條件性地渲染組件，當條件爲false時，Vue 3會將組件從DOM中移除，並且組件的狀態（包括組件的響應式數據和計算屬性等）會被保留。這意味着，當條件再次變爲true時，組件不會被重新創建，而是重新掛載到DOM中，並且其狀態會保持不變。
這是Vue 3的一個改進，因爲它減少了不必要的組件重創建，從而提高了性能。然而，如果你在組件中使用了key屬性，並且key值在組件被移除和重新掛載之間發生了變化，Vue 3會將組件視爲一個新的實例，並重新創建組件。
對於v-show：
v-show僅僅是通過CSS的display屬性來控制元素的可見性。無論v-show的值如何變化，元素始終保留在DOM中，因此組件的響應式數據和狀態不會受到影響。
使用Composition API：
在Vue 3中，你可以使用Composition API來更好地管理組件的狀態和邏輯。通過使用ref和reactive來創建響應式數據，你可以在組件的setup函數中組合和重用邏輯。
例如，使用setup函數和ref來管理響應式數據：
<script> import { ref, onMounted } from 'vue'; export default { setup() { const isVisible = ref(true); onMounted(() => { // 組件掛載後執行的代碼 }); function toggle() { isVisible.value = !isVisible.value; } return { isVisible, toggle }; } }; </script>
在這個例子中，isVisible是一個響應式的布爾值，它控制着組件的顯示和隱藏。即使isVisible的值發生變化，組件的響應式數據isVisible.value也會保持不變。
總結來說，在Vue 3中，使用v-if時組件的狀態會被保留，而使用v-show時組件始終存在於DOM中，因此它們的響應式數據不會受到影響。這使得Vue 3在處理條件渲染時更加高效和靈活。