Vue.js的Diff算法通过复用节点+调整插入位置实现“移动”，不直接移动DOM；核心是就地复用、key驱动精准识别、批量操作最小化真实DOM变更。
Vue.js 的 Diff 算法在处理节点移动时，并不直接“移动 DOM 元素”，而是通过复用已有节点 + 调整插入位置的方式，实现视觉上的“移动”，同时最小化真实 DOM 操作（如 appendChild、insertBefore）的次数。
核心原则：就地复用 + 位置调整
Vue 的虚拟 DOM Diff（基于双端比较的优化算法）默认采用“就地更新”策略。当发现新旧 vnode 中存在相同 key 的节点时，会复用对应的真实 DOM 元素，仅更新其 props、事件或子节点，而不会销毁重建。对于顺序变化（如从 [A,B,C] → [B,C,A]），Vue 不会逐个移动 A 到末尾，而是：
- 识别出 B、C 可复用（key 相同、类型相同）
- 将 A 对应的 DOM 节点从原位置移除
- 在新位置（末尾）执行一次
appendChild或insertBefore(null)
关键依赖：key 的正确使用
没有 稳定且唯一 的 key，Vue 就无法准确识别哪些节点是“同一个”，只能按索引比对，导致：
- 列表项被错误复用（如输入框失去焦点、动画中断）
- 看似“移动”的操作退化为大量
create+remove，DOM 开销陡增
✅ 正确做法：为每个列表项绑定业务语义明确的 key（如 :key="item.id"），避免用 :key="index"。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
真实 DOM 操作仅发生在必要处
Vue 不会为每个“视觉位移”都触发 DOM 移动。它通过以下方式压缩操作：
- 批量收集所有需移动的节点，统一做一次插入（如最后统一 append）
- 利用浏览器原生的
DocumentFragment缓冲中间状态，减少重排重绘 - 对连续可复用节点做“块级跳过”，只处理边界变动（例如 [A,B,C,D] → [X,B,C,Y]，只更新首尾，中间 BC 直接跳过）
可观察的最小化效果
在 Chrome DevTools 的 Elements 面板中开启“Paint Flashing”或使用 Performance 录制，可验证：
- 复用节点的
outerHTML地址不变（__vue__引用一致） - 控制台中
node.parentNode.insertBefore(node, ...)或parentNode.appendChild(node)的调用极少 - 无 key 时频繁出现
removeChild+createElement组合
