【Vue✨】Vue 中的 diff 算法详解

一、为什么需要 diff？

Vue 的核心目标是：数据驱动视图 。

当数据变化时，Vue 会触发更新，但它只知道 哪个组件要更新 ，而不是DOM的哪一部分要更新 。

如果每次都整棵 DOM 重绘，效率会很差。因此，Vue 借助 虚拟 DOM（VNode）+ diff 算法，找出新旧虚拟 DOM之间的差异（differences），只做最小化的真实 DOM 操作。

二、diff 的基本思路

Vue diff 的核心流程是：

生成虚拟 DOM：每次渲染结果是 VNode 树。

新旧 VNode 对比：比较新旧两棵树。

生成 patch：找出不同点。

更新真实 DOM：只改动必要的部分。

第二步 "新旧 VNode 对比" 就是 diff。

三、Vue 2 的 diff 算法

Vue 2 借鉴了 React 的思路，并进行了优化。

同层比较：只比较同一层级的节点，不跨层。

双端比较 ：列表更新时，使用首尾指针同时扫描，提高性能。

key 的作用 ：key 用来标识节点，帮助 Vue

精确判断节点是否复用、移动或销毁。

举个例子：

html 复制代码

<!-- 更新前 -->
<ul>
  <li key="a">A</li>
  <li key="b">B</li>
  <li key="c">C</li>
</ul>

<!-- 更新后 -->
<ul>
  <li key="b">B</li>
  <li key="a">A</li>
  <li key="d">D</li>
</ul>

diff 过程：

b → a 位置变了，Vue 通过 key知道是同一个节点，选择移动。

c 不存在了 → 删除。

新增 d → 插入。

最终只执行 移动 + 删除 + 插入 三步，而不是重建整个 <ul>。

四、Vue 3 的 diff 改进

Vue 3 在 Vue 2 的基础上做了大量优化：

编译时 Patch Flags

编译器会为动态节点打标记，告诉运行时"哪些地方可能会变"。
→ 避免对整个 VNode 做全量 diff。
静态提升

模板中的静态内容只会创建一次，后续复用。
列表 diff 的 LIS（最长递增子序列）优化

在比对有 key 的列表时，Vue 3 会找到最长递增子序列（表示无需移动的节点集合），其余节点再做移动。
→ 显著减少 DOM 移动次数。

五、diff 的执行流程（简化版）

判断节点是否相同 （key + type）：
- 不同 → 直接替换。
- 相同 → 深入比较子节点。
更新属性和事件 ：
- 对比 props、class、style。
- 有差异才更新。
更新子节点 ：
- 新旧都是文本 → 直接替换文本。
- 新旧都是数组 → 列表 diff（双端比较 + LIS 优化）。
- 一方为空 → 插入或删除。

六、Vue diff 的优缺点

优点

保证最小化 DOM 操作，提高渲染性能。
简单直观，和虚拟 DOM 结合自然。
Vue 3 编译时优化进一步减少运行时 diff 开销。

局限

diff 是近似最优解，而不是绝对最优。
对长列表仍可能性能压力大，需配合 v-for 的 key、虚拟列表优化。

七、面试常见问题

为什么需要 key？
→ 保证节点身份稳定，避免错误复用，减少 DOM 操作。
Vue 3 比 Vue 2 diff 快在哪里？
→ 静态提升 + Patch Flags + LIS 优化。
Vue diff 是否跨层比较？
→ 不跨层，只做同层对比。

八、总结

Vue 的 diff 算法，是虚拟 DOM 更新的核心。

Vue 2 用双端比较 + key。
Vue 3 在此基础上，通过 编译期优化 + 算法优化，把性能推到了新高度。