什么是虚拟 DOM？Vue 3 的 diff 算法是怎样的？

详细解析#

虚拟 DOM 是什么#

一个虚拟节点（VNode）就是一个普通的 JS 对象：

// <div id="app"><p>hello</p></div> 对应的 VNode（简化）
const vnode = {
  type: 'div', // 标签名；如果是组件，就是组件对象
  props: { id: 'app' },
  children: [{ type: 'p', props: null, children: 'hello' }],
  key: null,
  el: null, // 挂载后指向真实 DOM
  // Vue 3 新增的标记
  shapeFlag: 17, // ELEMENT | ARRAY_CHILDREN：元素节点，子节点是数组
  patchFlag: 0, // 编译器标记的动态内容，0 表示没有标记
}

为什么需要虚拟 DOM#

• 声明式开发：开发者只描述"什么状态对应什么 UI"，由框架计算差异、更新 DOM，不用手动操作 DOM
• 跨平台：VNode 不依赖浏览器环境，同一套渲染逻辑可以输出到浏览器 DOM，也可以在服务端渲染成 HTML 字符串，或者通过自定义渲染器（createRenderer）输出到 Canvas 等平台
• 批量更新：配合异步更新队列，多次状态修改只触发一次重新渲染，对比之后统一更新 DOM，详见 nextTick 的原理

diff 的基本策略#

• 只比较同一层级：实际开发中很少把节点跨层级移动，只做同层比较，能把完整对比两棵树的 O(n³) 复杂度降到接近 O(n)。节点跨层级移动时，会被当作删除再新建
• 类型不同直接替换：标签名或组件不同，就卸载旧节点、挂载新节点，不再比较它们的子节点
• 类型和 key 都相同才复用：复用真实 DOM，再继续比较 props 和子节点。同一层的子节点通过 key 识别，见 key 的作用

Vue 3 带 key 子节点的 diff#

新旧子节点都是带 key 的数组时，分五步处理：

1. 从头部开始比较：相同的节点直接 patch，遇到不同的就停下
2. 从尾部开始比较：同样处理，遇到不同的就停下
3. 旧节点处理完、新节点还有剩余：剩下的都是新增节点，依次挂载
4. 新节点处理完、旧节点还有剩余：剩下的旧节点全部卸载
5. 处理中间乱序的部分：
   • 为新节点建立 key 到索引的映射
   • 遍历旧节点：能在映射里找到的就 patch 复用，找不到的就卸载；同时记录每个新节点在旧列表中的位置
   • 对这个位置数组求最长递增子序列。属于子序列的节点相对顺序没变，不用移动；其余节点移动到正确的位置，在旧列表中找不到的就新建

如果复用的节点在新列表中的顺序本来就是递增的，说明不需要移动，Vue 会跳过求子序列这一步。

举个例子#

旧：a b c d e f g
新：a b e c d h f g

1. 头部：a、b 相同，patch 后停在 c 和 e
2. 尾部：g、f 相同，patch 后停在 e 和 h
3、4. 新旧两边都有剩余，跳过
5. 中间部分：旧 [c d e]，新 [e c d h]
   e、c、d 在旧列表中的位置分别是 4、2、3，h 是新节点
   [4, 2, 3] 的最长递增子序列是 [2, 3]，对应 c、d，它们不用移动
   最终只需要两次 DOM 操作：把 e 移到 c 前面，新建 h 插到 f 前面

源码中位置数组存的是"旧索引 + 1"，用 0 表示新节点，所以这个例子里实际是 [5, 3, 4, 0]。

Vue 2 的双端比较#

Vue 2 用四个指针分别指向新旧列表的头和尾，每一轮依次比较"旧头和新头、旧尾和新尾、旧头和新尾、旧尾和新头"，匹配上就 patch 并移动指针，交叉匹配时还要移动 DOM。四种情况都不匹配时，再用 key 去旧节点里查找。

编译优化的配合#

上面是完整 diff 的过程。Vue 3 的编译器还会给动态节点打上 PatchFlag，并把动态节点收集到 Block 中，更新时只比较这些动态节点，静态内容直接跳过，详见 Vue 3 在编译阶段做了哪些优化。

面试官可能追问#

易错点#

• diff 只做同层比较，节点跨层级移动会被当作删除再新建
• 同一个节点的判断条件是类型和 key 都相同，key 相同但标签不同也会重新创建
• 最长递增子序列找的是不需要移动的节点，不是需要移动的节点