vue.js的diff算法不追求理论最小移动步数，而是通过双端对比、key映射查找和就地更新实现o(n)高效dom更新；它优先复用首尾节点，未匹配时贪心复用并单次移动，实际效果接近最优。
Vue.js 的 Diff 算法（基于双端对比的 “就地更新”策略）本身不主动计算或最小化移动步数，它的核心目标是用最少的 DOM 操作完成视图更新，而“移动步数最小化”是这一目标在列表重排场景下的自然体现——它通过尽可能复用节点、避免创建/销毁、优先就地调整顺序来达成高效更新。
双端对比：从头尾快速锚定稳定节点
Vue 2/3 在 patch 一组子节点时，会维护两个指针：oldStartIdx / oldEndIdx 和 newStartIdx / newEndIdx，分别指向旧 VNode 列表和新 VNode 列表的首尾。算法优先比对四组可能匹配：
- oldStart ↔ newStart（头部相同，直接 patch）
- oldEnd ↔ newEnd（尾部相同，直接 patch）
- oldStart ↔ newEnd（旧头 = 新尾 → 节点需移动到末尾）
- oldEnd ↔ newStart（旧尾 = 新头 → 节点需移动到开头）
这种设计让首尾稳定的元素几乎零移动，大幅减少中间扫描；一旦某端无法匹配，才进入“查找 + 移动”阶段。
key 驱动映射查找：避免暴力遍历，定位最优插入点
当双端无法匹配时，Vue 会基于 newStartVNode.key 在旧节点中快速查找可复用项（内部使用 Map 缓存 oldCh 的 key → index 映射）。找到后：
- 若位置错位（如 oldIndex 提前移动到 newStart 位置
- Vue 直接调用
parentNode.insertBefore(newStartEl, oldStartEl)，DOM 层仅一次移动操作 - 未命中则新建节点，插入到 newStart 位置
这个过程不尝试穷举所有排列组合去算“全局最优移动序列”，而是用贪心策略：每步都选当前最确定、开销最小的操作（复用+单次 insertBefore），整体效果接近移动步数最小化。
就地更新原则：不重排数组，只移动真实 DOM 节点
Vue 的 diff 不改变原始数据数组顺序，也不预计算“最终索引映射表”。它：
- 逐个处理 newChildren，按 newStartIdx 顺序推进
- 对每个要插入的位置，只关心“哪个旧节点能复用”以及“它当前在哪”
- 移动动作严格限于
insertBefore或appendChild，不执行多次 swap 或 delete+reinsert
例如：[A,B,C,D] → [D,A,B,C]，Vue 会把 D 从末尾取出并 insertBefore A，其余节点保持原位，仅 1 次移动 —— 这正是移动步数最小解。
为什么不是“最优解算法”？
严格意义上的最小移动步数属于“编辑距离”或“最长公共子序列”问题，时间复杂度 O(n²)，对高频更新不现实。Vue 选择 O(n) 的双端+哈希查找，在性能、内存、实现简洁性、实际 DOM 效率之间做了务实平衡。实测表明，它在绝大多数业务列表场景（增删、局部重排、首尾变化）中，移动次数与理论最小值一致或仅差常数级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
