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 映射）。找到后：
立即学习
“
前端免费学习笔记（深入）
”；
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
若位置错位（如 oldIndex < oldStartIdx），说明该节点需要
提前移动
到 newStart 位置
Vue 直接调用
，DOM 层仅一次移动操作
未命中则新建节点，插入到 newStart 位置
这个过程
不尝试穷举所有排列组合去算“全局最优移动序列”
，而是用贪心策略：每步都选当前最确定、开销最小的操作（复用+单次 insertBefore），整体效果接近移动步数最小化。
就地更新原则：不重排数组，只移动真实 DOM 节点
Vue 的 diff 不改变原始数据数组顺序，也不预计算“最终索引映射表”。它：
逐个处理 newChildren，按 newStartIdx 顺序推进
对每个要插入的位置，只关心“哪个旧节点能复用”以及“它当前在哪”
移动动作严格限于
或
，不执行多次 swap 或 delete+reinsert
例如：
→
，Vue 会把 D 从末尾取出并
insertBefore A
，其余节点保持原位，仅 1 次移动 —— 这正是移动步数最小解。
为什么不是“最优解算法”？
严格意义上的最小移动步数属于“编辑距离”或“最长公共子序列”问题，时间复杂度 O(n²)，对高频更新不现实。Vue 选择 O(n) 的双端+哈希查找，在
性能、内存、实现简洁性、实际 DOM 效率之间做了务实平衡
。实测表明，它在绝大多数业务列表场景（增删、局部重排、首尾变化）中，移动次数与理论最小值一致或仅差常数级。
parentNode.insertBefore(newStartEl, oldStartEl)insertBeforeappendChild[A,B,C,D][D,A,B,C]