深入解析vue中props与v-if结合控制子组件渲染
本文探讨Vue中父组件通过props控制子组件根元素v-if指令，以及由此产生的子组件生命周期变化。父组件传递布尔值visible给子组件，控制子组件根元素的显示与隐藏。
两种控制方式对比：
方式一：在子组件中使用v-if="visible"
立即学习“前端免费学习笔记（深入）”；
这种方式在子组件根元素上使用v-if。即使visible初始值为false，子组件的生命周期钩子函数（beforeCreate、created、beforeMount、mounted）仍然会执行一次。这是因为Vue在编译阶段已创建子组件实例，v-if仅控制渲染，而非实例创建。当visible变为true时，子组件实例已存在，不会再次触发生命周期。这与直觉上的“v-if为假则不创建实例”有所不同。
方式二：在父组件中使用v-if控制子组件挂载，例如<son v-if="xxxx" ...></son>
此方式直接在父组件中用v-if控制子组件的挂载。当xxxx为false时，子组件实例不会创建；当xxxx变为true时，Vue会创建一个新的子组件实例，从而触发完整的组件生命周期。
核心区别：方式一控制渲染，实例始终存在；方式二控制实例的创建和销毁。方式一中，即使子组件未渲染，其内部data、methods等仍可用。若需在visible变化时执行操作，可在子组件中使用watch监听visible prop的变化。
理解这两种方式的区别对于优化Vue组件至关重要，能避免不必要的性能损耗，并编写更精确的代码。 选择合适的控制方式取决于具体的应用场景和性能需求。
