什么是“双端比较”算法?回顾 Vue2 核心 Diff 思想及其优缺点

落辰同学_6584

落辰同学_6584

2026-05-24

561人浏览

原创

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

什么是“双端比较”算法?回顾 vue2 核心 diff 思想及其优缺点

“双端比较”是 Vue2 中用于列表更新的核心 Diff 策略,本质是一种在新旧子节点数组两端同时推进、分四路尝试匹配的高效比对方法。它不追求穷举所有可能,而是基于现实场景中节点移动常发生在首尾的直觉,用四个指针快速收敛差异,把时间复杂度控制在 O(n)。

双端比较怎么运作?

算法维护四个索引指针:

  • oldStartIdx / oldEndIdx:指向旧子节点数组的开头和结尾
  • newStartIdx / newEndIdx:指向新子节点数组的开头和结尾

每轮循环按固定顺序尝试四种匹配:

  • 旧头 vs 新头(oldStart ↔ newStart)→ 位置未变,直接 patch
  • 旧尾 vs 新尾(oldEnd ↔ newEnd)→ 尾部稳定,原地更新
  • 旧头 vs 新尾(oldStart ↔ newEnd)→ 节点从尾移到头,执行 DOM 移动
  • 旧尾 vs 新头(oldEnd ↔ newStart)→ 节点从头移到尾,同样移动

一旦某路匹配成功,对应指针前移或后缩;若四路全不中,则退回到 key 映射表查找——这是兜底逻辑,确保任意乱序都能处理。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习