深入理解Vue子组件v-if控制下的渲染机制

本文将详细解释Vue中父组件通过props控制子组件根元素v-if指令的机制，并分析为何即使v-if条件初始为false，子组件生命周期仍会执行。

问题：父组件使用props向子组件传递visible属性，控制子组件根元素<div>的v-if指令（<code><div v-if="visible">）。即使<code>visible初始值为false，子组件的生命周期钩子函数（例如beforeCreate、created）仍会执行。

原因：Vue在初始化父组件时，已创建子组件实例并传递visible属性值。尽管v-if阻止了子组件渲染，但子组件实例依然存在。这与父组件直接使用v-if控制子组件不同，后者会根据v-if条件创建或销毁子组件实例。

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

立即学习“前端免费学习笔记（深入）”；

行为：当visible从false变为true，子组件内容渲染，但不会再次触发子组件生命周期钩子函数，因为实例已存在，v-if仅控制DOM元素显示/隐藏。 当visible从true变为false，子组件内容消失，但实例依然存在，不会被销毁。

结论：通过props控制子组件根元素v-if，只控制DOM元素显示/隐藏，而非子组件实例的创建和销毁。这与父组件直接使用v-if控制子组件有本质区别。后者会创建/销毁子组件实例，从而触发完整生命周期。 若需在visible属性变化时执行操作，可在子组件中使用watch监听visible属性变化。