Vue 2 / Vue 3 diff算法

一句话核心结论

Vue 2 是运行时驱动的双端 diff
Vue 3 是编译期标记 + 运行时最小化更新（LIS）

---

Vue 2 Diff（双端比较）

核心算法

• 双端指针 diff
• 运行时递归对比整棵 VNode 树

oldStart →        ← oldEnd
newStart →        ← newEnd

4 种命中策略

1. oldStart vs newStart
2. oldEnd vs newEnd
3. oldStart vs newEnd
4. oldEnd vs newStart

• key → 建立 map 查找

特点

• 所有节点都会参与 diff
• 静态节点也要比较
• 列表乱序时 DOM 移动次数不稳定

优缺点

✅ 实现简单、直观
❌ 大模板 / 大列表性能不稳定

---

Vue 3 Diff（Block + LIS）

编译期优化（关键差异）

• PatchFlags：标记哪些会变
• Block Tree：只收集动态节点

PatchFlags.TEXT
PatchFlags.CLASS
PatchFlags.PROPS

运行时 diff

• 只 diff 动态节点
• 列表更新使用 最长递增子序列（LIS）
• 保证 最少 DOM 移动

特点

• 静态节点完全跳过
• diff 更“确定性”
• 性能更稳定

---

Vue 2 vs Vue 3 对比表（速记）

维度	Vue 2	Vue 3
diff 时机	运行时	编译期 + 运行时
核心算法	双端指针	LIS
静态节点	参与 diff	直接跳过
列表性能	不稳定	最优
key 作用	重要	非常重要

---

面试标准回答模板（直接背）

Vue 2 的 diff 主要是运行时的双端比较算法，通过 key 减少 DOM 操作，但所有节点都需要参与比较。
Vue 3 在编译期引入 PatchFlags 和 Block Tree，只对动态节点进行 diff，并在列表更新时通过最长递增子序列算法，保证 DOM 移动次数最少，因此性能和稳定性都更好。

---

高频追问（你一定会被问）

Q1：为什么 Vue 3 一定要用 key？

👉 LIS 必须依赖稳定 key 才能算出“最少移动”

Q2：Vue 3 diff 还需要递归吗？

👉 需要，但只在 Block 内的动态节点

Q3：Vue 3 为什么更快？

👉 不是算法更快，是 diff 的节点更少

---