vue v if 实现原理

Vue v-if 的实现原理

Vue 的 v-if 指令通过条件渲染来控制 DOM 元素的显示与隐藏。其核心原理涉及虚拟 DOM 的创建与销毁，以及编译阶段的代码转换。

编译阶段转换

在模板编译阶段，v-if 会被转换为一个三元表达式或 if 条件语句。例如以下模板：

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

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

function render() {
  return condition ? createVNode('div', {}, 'Content') : null;
}

虚拟 DOM 的创建与销毁

当 condition 为 true 时，Vue 会创建对应的虚拟 DOM 节点并渲染到真实 DOM 中。当 condition 变为 false 时，Vue 会销毁该虚拟 DOM 节点，并从真实 DOM 中移除对应的元素。这种销毁是彻底的，包括组件实例和事件监听器的清理。

与 v-show 的区别

v-if 是真正的条件渲染，通过销毁和重建 DOM 实现。而 v-show 仅通过 CSS 的 display 属性控制显示与隐藏，DOM 元素始终存在。

性能考量

频繁切换的场景下，v-show 性能更好，因为避免了重复的销毁和重建。初始渲染条件为假时，v-if 可以避免不必要的渲染开销。

源码中的关键逻辑

在 Vue 源码中，v-if 的处理主要在编译器和运行时两个部分：

1. 编译器将 v-if 转换为条件表达式。
2. 运行时根据条件表达式的值决定是否创建或销毁虚拟 DOM 节点。

示例代码解析

以下是一个包含 v-if 的模板及其编译结果：

<div v-if="show">Visible Content</div>

编译后的渲染函数类似：

function render(_ctx, _cache) {
  return _ctx.show
    ? _openBlock(),
      _createBlock("div", { key: 0 }, "Visible Content")
    : _createCommentVNode("v-if", true);
}

当 show 为 false 时，会创建一个注释节点占位，而不是渲染实际内容。