vue vif实现原理

Vue 中 v-if 的实现原理

v-if 是 Vue 中的一个条件渲染指令，用于根据表达式的真假值动态地渲染或销毁 DOM 元素。其核心实现依赖于 Vue 的虚拟 DOM 和响应式系统。

编译阶段

在模板编译阶段，v-if 会被解析为一个特殊的 AST 节点。Vue 的编译器会将 v-if 转换为一个三元表达式，并生成对应的渲染函数代码。例如：

<div v-if="condition">Content</div>

编译后的渲染函数大致如下：

function render() {
  return (condition) 
    ? _c('div', [_v("Content")]) 
    : _e()
}

其中 _c 表示创建元素，_v 创建文本节点，_e 创建空节点。

响应式依赖

v-if 的表达式会被 Vue 的响应式系统追踪。当表达式的值发生变化时，会触发组件的重新渲染。Vue 通过依赖收集机制确保只有依赖的响应式数据变化时才会更新。

虚拟 DOM 对比

在重新渲染时，Vue 会比较新旧虚拟 DOM。如果 condition 从真变为假，Vue 会销毁原有的 DOM 节点；如果从假变为真，则会创建新的 DOM 节点。这一过程通过 patch 算法高效完成。

与 v-show 的区别

v-if 是真正的条件渲染，会销毁和重建 DOM 元素；而 v-show 只是通过 CSS 的 display 属性控制显示/隐藏。v-if 有更高的切换开销，适合运行时条件很少改变的场景；v-show 有更高的初始渲染开销，适合频繁切换的场景。

生命周期影响

使用 v-if 时，元素及其子组件的生命周期钩子会在条件变化时触发。当条件为假时，组件实例会被销毁；条件为真时，会重新创建实例并触发 mounted 等钩子。