父组件通过 props 控制子组件 root 元素的 v-if，子组件生命周期执行之谜
当通过 props 中的值控制子组件 root 元素的 v-if 时，子组件的生命周期执行情况有所不同，具体表现如下：
方案 1：直接使用 v-if 控制
当 v-if 为 false 时，子组件的生命周期钩子函数会执行，这是因为 v-if 会销毁组件实例。切换 v-if 时，子组件会被销毁并重建，因此会再次执行钩子函数。
方案 2：通过 props 控制 root 元素
当 visible 为 false 时，子组件的生命周期钩子函数不会执行。这是因为子组件实例仍然存在，只是 root 元素没有渲染到页面上。实际上，组件已经初始化，只是隐藏而已。可见，visible 只是控制 root 元素的显示与隐藏，而不会影响组件实例本身。
总结一下，在方案 1 中，v-if 会影响子组件实例的生命周期，而方案 2 不会。不过，可以通过在子组件中添加一个 watch – visible 来监听到 visible 的变化。
以上就是Props 控制 v-if 对子组件生命周期的影响是怎样的？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630082.html
微信扫一扫 
支付宝扫一扫 
