Props 控制 v-if 对子组件生命周期的影响是怎样的？

父组件通过 props 控制子组件 root 元素的 v-if，子组件生命周期执行之谜

当通过 props 中的值控制子组件 root 元素的 v-if 时，子组件的生命周期执行情况有所不同，具体表现如下：

方案 1：直接使用 v-if 控制

<son v-if="visible"></son>

当 v-if 为 false 时，子组件的生命周期钩子函数会执行，这是因为 v-if 会销毁组件实例。切换 v-if 时，子组件会被销毁并重建，因此会再次执行钩子函数。

方案 2：通过 props 控制 root 元素

<son :visible="visible"></son>

当 visible 为 false 时，子组件的生命周期钩子函数不会执行。这是因为子组件实例仍然存在，只是 root 元素没有渲染到页面上。实际上，组件已经初始化，只是隐藏而已。可见，visible 只是控制 root 元素的显示与隐藏，而不会影响组件实例本身。

总结一下，在方案 1 中，v-if 会影响子组件实例的生命周期，而方案 2 不会。不过，可以通过在子组件中添加一个 watch - visible 来监听到 visible 的变化。

以上就是Props 控制 v-if 对子组件生命周期的影响是怎样的？的详细内容，更多请关注其它相关文章！