一、为什么需要 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
复制代码
- A
- B
- C
- B
- A
- D
diff 过程：
b → a 位置变了，Vue 通过 key知道是同一个节点，选择移动。
c 不存在了 → 删除。
新增 d → 插入。
最终只执行 移动 + 删除 + 插入 三步，而不是重建整个
- 。
四、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 在此基础上，通过 编译期优化 + 算法优化，把性能推到了新高度。