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

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Props 控制 v-if 对子组件生命周期的影响是怎样的？》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

父组件通过 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 对子组件生命周期的影响是怎样的？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！