vue v if 实现

Vue 中 v-if 的实现原理

Vue 的 v-if 指令通过条件渲染控制 DOM 元素的显示与隐藏。其核心实现依赖于虚拟 DOM 的 diff 算法和组件生命周期管理。

编译阶段处理

模板编译阶段会将 v-if 转换为渲染函数的条件表达式。例如以下模板：

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

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

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

_c 表示创建元素，_e 表示创建空节点。

运行时处理

当 isShow 值变化时，Vue 会执行以下逻辑：

1. 新旧 VNode 对比时发现条件变化，触发销毁或创建操作
2. 条件为 false 时，组件实例会被销毁并移除 DOM
3. 条件为 true 时，会重新创建组件实例并插入 DOM

与 v-show 的区别

v-if 是真正的条件渲染，会销毁和重建组件实例：

• 切换开销大，适合运行时条件很少改变的场景
• 会触发组件的生命周期钩子

v-show 只是切换 CSS 的 display 属性：

• 初始渲染开销大，适合频繁切换的场景
• 不会触发生命周期钩子

使用建议

在需要完全销毁/重建组件时使用 v-if：

<template v-if="user.isAdmin">
  <AdminPanel/>
</template>

在需要频繁切换显示状态时使用 v-show：

<div v-show="isActive">Tab Content</div>

源码关键实现

Vue 源码中主要通过以下方式处理 v-if：

1. 编译阶段生成条件表达式
2. 运行时通过 createComponent 和 removeVnodes 管理组件实例
3. 通过 directives 模块处理指令的更新逻辑