Vue组件渲染机制：v-if与props的交互
本文深入探讨Vue中父组件props值与子组件v-if指令联动的渲染机制，以及子组件生命周期钩子函数的执行情况。
问题： 父组件通过props传递布尔值控制子组件根元素的v-if，实现子组件的显示/隐藏。但即使初始值为false，子组件生命周期钩子函数仍执行一次；之后修改props值，子组件显示状态改变，但钩子函数不再执行。这与直接用v-if控制子组件挂载不同。
分析：
立即学习“前端免费学习笔记（深入）”；
关键在于v-if和props交互机制。直接用v-if控制子组件时，v-if为false则销毁组件，为true则创建新实例。因此，v-if值变化会触发子组件生命周期钩子函数。
千帆AppBuilder
百度推出的一站式的AI原生应用开发资源和工具平台，致力于实现人人都能开发自己的AI原生应用。
174 查看详情
在本例中，v-if仅控制子组件根元素的显示/隐藏，而非组件实例的创建/销毁。子组件实例在页面加载时已创建，即使初始visible为false，钩子函数也会执行一次，因为实例已存在。修改visible值只影响渲染，不触发实例创建/销毁，所以钩子函数不再执行。
解决方案与对比：
方案一：直接用v-if控制子组件挂载。 v-if条件改变时，子组件实例会被创建或销毁，触发完整生命周期钩子函数。
方案二：用props控制子组件内部v-if。 子组件实例始终存在，仅渲染内容变化。生命周期钩子函数仅在实例创建时执行一次。
选择方案取决于需求。需要在显示/隐藏时进行初始化/清理操作，则选择方案一；只需控制内容显示/隐藏，方案二更高效。
以上就是Vue子组件中v-if和props联动：为什么子组件生命周期钩子函数只执行一次？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1131752.html
微信扫一扫 
支付宝扫一扫 
