Vue 虚拟 DOM

虚拟 DOM 作为 Vue 响应式渲染体系的核心抽象层，其设计决策直接影响运行时性能与可维护性。本文将剖析虚拟 DOM 的结构化表达、差异化算法、编译时转换路径及工程化落地要点，为深入理解 Vue 渲染机制与性能调优提供系统性指引。

一、什么是虚拟 DOM

一句话：虚拟 DOM 就是描述视图结构的普通 JavaScript 对象。

// 一段虚拟 DOM
{
  tag: 'div',
  data: { class: 'list' },
  children: [
    { tag: 'span', text: 'Hello' }
  ]
}

每个组件都有 render 函数，返回的就是一棵虚拟 DOM 树。视图第一次渲染和后续数据更新，都是对这棵树做增删改，而非直接操作真实 DOM。

二、为什么需要虚拟 DOM

真实 DOM 的操作成本极高：创建、插入、删除、重排、重绘都要走浏览器内核。

Vue 的做法是：

1. 用 JS 计算代替 DOM 计算

   先在内存里对比两棵虚拟 DOM 树，找出最小差异。

2. 批量 DOM 操作

   把差异一次性 patch 到真实 DOM，减少重排重绘。

结果就是：渲染效率提升，交互响应更快。

三、虚拟 DOM → 真实 DOM 的完整流水线

1. 首次挂载
   render() ➜ 生成虚拟 DOM ➜ createElm() ➜ 真实 DOM ➜ 插入页面。

2. 数据更新
   render() 再次执行 ➜ 新的虚拟 DOM ➜ patch(oldVNode, newVNode) ➜ 计算 diff ➜ 最小化更新真实 DOM。

核心算法：同层比较 + 双端 diff，时间复杂度 O(n)。

四、模板与虚拟 DOM 的隐秘关系

模板不是最终产物，而是写给人类的高级语法糖。

<template>
  <div class="list">
    <span>{{ msg }}</span>
  </div>
</template>

在 Vue CLI 的默认配置下：

模板字符串 → AST → render 函数 → 虚拟 DOM → 真实 DOM。

• 预编译阶段：打包时完成模板 → render 的转换，减少运行时开销。
• 运行时阶段：浏览器里只有 render 函数，没有模板解析器，因此体积更小、速度更快。

总结

1. 虚拟 DOM 是描述视图的 JS 对象。
2. 用它代替真实 DOM 计算，降低性能损耗。
3. 首次渲染生成真实 DOM，数据更新时 diff + patch 只做最小改动。
4. 模板最终会被预编译成 render 函数，虚拟 DOM 才是运行时真相。

一句话总结：模板写给开发者，虚拟 DOM 写给浏览器，真实 DOM 只负责最终呈现。