双端比较是vue2列表更新的核心diff策略,通过oldstart/oldend/newstart/newend四个指针,按头头、尾尾、头尾、尾头顺序匹配,匹配成功则移动指针,全不中时回退key映射查找,兼顾效率与兜底。

“双端比较”是 Vue2 中用于列表更新的核心 Diff 策略,本质是一种在新旧子节点数组两端同时推进、分四路尝试匹配的高效比对方法。它不追求穷举所有可能,而是基于现实场景中节点移动常发生在首尾的直觉,用四个指针快速收敛差异,把时间复杂度控制在 O(n)。
双端比较怎么运作?
算法维护四个索引指针:
- oldStartIdx / oldEndIdx:指向旧子节点数组的开头和结尾
- newStartIdx / newEndIdx:指向新子节点数组的开头和结尾
每轮循环按固定顺序尝试四种匹配:
- 旧头 vs 新头(oldStart ↔ newStart)→ 位置未变,直接 patch
- 旧尾 vs 新尾(oldEnd ↔ newEnd)→ 尾部稳定,原地更新
- 旧头 vs 新尾(oldStart ↔ newEnd)→ 节点从尾移到头,执行 DOM 移动
- 旧尾 vs 新头(oldEnd ↔ newStart)→ 节点从头移到尾,同样移动
一旦某路匹配成功,对应指针前移或后缩;若四路全不中,则退回到 key 映射表查找——这是兜底逻辑,确保任意乱序都能处理。

