vue vif实现原理

Vue v-if 实现原理

Vue 的 v-if 指令通过条件渲染控制 DOM 元素的显示与隐藏。其实现原理基于虚拟 DOM 和编译阶段的代码生成。

编译阶段

模板中的 v-if 会被编译为渲染函数中的条件表达式。例如以下模板：

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

会被编译为类似以下的渲染函数代码：

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

_c 创建元素，_e 创建空节点，_v 创建文本节点。

虚拟 DOM 对比

当 condition 变化时，Vue 会重新执行渲染函数生成新的虚拟 DOM，并与旧的虚拟 DOM 对比。如果条件不满足，虚拟 DOM 中对应位置是空节点，触发真实 DOM 的移除操作。

与 v-show 的区别

v-if 是真正的条件渲染，会销毁和重建组件及其事件监听器。v-show 只是切换 CSS 的 display 属性，元素始终保留在 DOM 中。

生命周期影响

使用 v-if 切换时，组件会完整触发销毁和重新创建的生命周期钩子。频繁切换的场景下，v-show 性能更好。

源码关键点

在 Vue 源码中，v-if 的处理主要在编译器的 processIf 函数和代码生成阶段，生成三元表达式形式的渲染代码。运行时依赖虚拟 DOM 的比对机制实现条件渲染。