Vue的Diff算法采用同层比对、双端指针匹配、key驱动复用和就地patch四大机制，通过最小化DOM操作提升性能。

Vue 的 Diff 算法不是逐节点暴力比对，而是靠一套有顺序、有判断、有复用的确定性流程，把 DOM 更新控制在最小范围。

同层比对，不跨级递归

只比较同一深度的兄弟节点。父节点一旦变化（比如 tag 改了、is 动态切换），整棵子树直接卸载重建，避免误判和嵌套开销。这省掉大量无意义的子树遍历，也符合真实开发中“结构稳定、局部变动”的常见场景。

双端指针快速收口

面对列表更新，Vue 维护四个索引：旧头、旧尾、新头、新尾。按固定顺序尝试四种匹配：

• 新头 === 旧头 → 直接 patch，两个头指针后移
• 新尾 === 旧尾 → 直接 patch，两个尾指针前移
• 新头 === 旧尾 → 节点右移（如末尾插入），把旧尾 DOM 移到新头位置，旧尾指针前移
• 新尾 === 旧头 → 节点左移（如开头插入），把旧头 DOM 移到新尾位置，旧头指针后移

只要命中任意一种，就跳过中间大量节点；全不匹配时，才进入 key 查找环节。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

立即学习“前端免费学习笔记（深入）”；

key 是复用的硬门槛

没有 key，就没有稳定映射 —— Vue 不会仅凭标签名或内容决定复用。

• v-for 必须用唯一、稳定、可预测的 key（推荐每项的 id，禁用 index）
• key 相同 + tag 相同 → 复用 DOM 元素，只 patch props 和子内容
• key 相同 + tag 不同 → 直接替换整个元素（不复用）
• 没写 key → 回退到“就地复用”：按索引一一对应 patch，容易导致输入框失焦、滚动位置丢失等状态错乱

就地 patch 优先，移动优于重建

类型相同的节点（比如都是

），默认不销毁重建，只更新属性、事件绑定和子节点内容。

• 只有标签名、is 属性或组件定义发生变化时，才触发整节点替换
• 对于顺序变化（如 [A,B,C] → [B,C,A]），识别出 B、C 可复用后，只把 A 对应的 DOM 从原位置移除，再 append 到新位置 —— 一次移动操作搞定
• 所有复用都基于 vnode 到真实 DOM 的绑定关系，包括 input 光标、ref 实例、内部状态等一并保留