#Vue Diff 算法

Vue 是怎么快速找出需要更新的节点的？

#同层对比

Vue Diff 发生在 Virtual DOM Patch 阶段，采用同层对比策略：只比较同一层级的节点，不跨级比较。

#Vue 2：双端对比

用 4 个指针：旧头、旧尾、新头、新尾。

通过 4 种组合（头头、尾尾、头尾、尾头）尝试匹配：

• 命中就继续比较下一个
• 没命中再用 key 去旧列表里找

适合：反转列表、首尾追加等常见操作

#Vue 3：快速 Diff

用 最长递增子序列 (LIS) 算法：

1. 先处理头尾相同的节点
2. 中间乱序的部分，计算最长递增子序列
3. 序列中的节点不动，其他节点移动到间隙

优势：移动次数最少，性能更好

#Key 的重要性

不加 Key 时，Vue 采用就地复用：

• 只更新文本，不移动节点
• 后果：输入框内容会错位，过渡动画失效

必须加 Key：让 Diff 识别节点身份，正确复用/移动/删除

#总结

	Vue 2	Vue 3
算法	双端对比	最长递增子序列
性能	好	更好
Key	必须加	必须加