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

一、为什么需要 diff？

Vue 的核心目标是：数据驱动视图。
当数据变化时，Vue 会触发更新，但它只知道 哪个组件要更新，而不是DOM的哪一部分要更新。
如果每次都整棵 DOM 重绘，效率会很差。因此，Vue 借助 虚拟 DOM（VNode）+ diff 算法，找出新旧虚拟 DOM之间的差异（differences），只做最小化的真实 DOM 操作。

---

二、diff 的基本思路

Vue diff 的核心流程是：

1. 生成虚拟 DOM：每次渲染结果是 VNode 树。
2. 新旧 VNode 对比：比较新旧两棵树。
3. 生成 patch：找出不同点。
4. 更新真实 DOM：只改动必要的部分。

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

---

三、Vue 2 的 diff 算法

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

• 同层比较：只比较同一层级的节点，不跨层。
• 双端比较：列表更新时，使用首尾指针同时扫描，提高性能。
• key 的作用：key 用来标识节点，帮助 Vue

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

举个例子：

<!-- 更新前 -->
<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 过程：

1. b → a 位置变了，Vue 通过 key知道是同一个节点，选择移动。
2. c 不存在了 → 删除。
3. 新增 d → 插入。

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

---

四、Vue 3 的 diff 改进

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

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

2. 静态提升
   模板中的静态内容只会创建一次，后续复用。

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

---

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

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

---

六、Vue diff 的优缺点

优点

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

局限

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

---

七、面试常见问题

1. 为什么需要 key？
   → 保证节点身份稳定，避免错误复用，减少 DOM 操作。

2. Vue 3 比 Vue 2 diff 快在哪里？
   → 静态提升 + Patch Flags + LIS 优化。

3. Vue diff 是否跨层比较？
   → 不跨层，只做同层对比。

---

八、总结

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

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