前言：
有时我们没在一个组件做初始化数据的工作，只是在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在处理条件渲染时更加高效和灵活。