详解Vue2的diff算法


Posted in Vue.js onJanuary 06, 2021

前言

双端比较算法是vue2.x采用的diff算法,本篇文章只是对双端比较算法粗略的过程进行了一下分析,具体细节还是得Vue源码,Vue的源码在这

过程

假设当前有两个数组arr1和arr2

let arr1 = [1,2,3,4,5]
let arr2 = [4,3,5,1,2]

那么其过程有五步

  1.  arr1[0] 和 arr2[0]比较
  2.  arr1[ arr1.length-1 ] 和 arr2[ arr2.length-1 ] 比较
  3.  arr1[0] 和 arr2[ arr2.length-1 ] 比较
  4.  arr1[ arr1.length-1 ] 和 arr2[0] 比较
  5.  arr2[0] 和 arr1的每个元素进行比较

每次比较都是从数组的两端开始比较,如果是首位比较相等,那么比较的开头索引+1

如果是在末尾比较成功,那么比较的结束索引-1,当开头索引大于结束索引时说明比较已经结束

拆解过程

let arr1 = [1,2,3,4,5]
let arr2 = [4,3,5,1,2]

let oldStartIdx = 0 
let oldEndIdx = arr1.lenght -1
let newStartIdx = 0
let newEndIdx = arr2.length -1

let oldStartVNode = arr1[oldStartIdx]   
let oldEndVNode = arr1[oldEndIdx]  
let newStartVNode = arr2[newStartIdx]  
let newEndVNode = arr2[newEndIdx]

第一轮:
 1. 1和4比较不相等
 2. 5和2比较不相等
 3. 1和2比较不相等
 4. 5和4比较不相等
 5. 4和旧数组逐一比较,和索引为3的值相等,说明4由索引3变换位置为了0, newStartIdx++
 //比较完后,使用u_1表示比较成功的元素
 [1,2,3,u_1,5] //arr1
 [u_1,3,5,1,2] //arr2

第二轮:
 1. 1和3比较不相等
 2. 5和2比较不相等
 3. 1和2比较不相等
 4. 5和3比较不相等
 5. 3和旧数组逐一比较,和索引为2的值相等,3由索引2变换位置为了0, newStartIdx++
 //比较成功后,使用u_2表示比较成功的元素
 [1,2,u_2,u_1,5] //arr1
 [u_1,u_2,5,1,2] //arr2

第三轮: 
 1. 1和5比较不相等 
 2. 5和2比较不相等 
 3. 1和2比较不相等 
 4. 5和5比较相等,5已经从旧数组oldEndIdx位置移动到了newStartIdx位置,newStartIdx++, oldEndIdx-- 
 5. 第四步比较成功,进入下一轮 
 //比较成功后,使用u_3表示比较成功的元素 
 [1,2,u_2,u_1,u_3] //arr1 
 [u_1,u_2,u_3,1,2] //arr2

第四轮: 
 1. 1和1比较相等,1已经从旧数组oldStartIdx位置移动到newStartIdx位置,oldStartIdx++,newStartIdx++ 
 2. 第一步比较成功,进入下一轮 3. 第一步比较成功,进入下一轮 
 4. 第一步比较成功,进入下一轮 5. 第一步比较成功,进入下一轮 
 //比较成功后,使用u_4表示比较成功的元素 
 [u_4,2,u_2,u_1,u_3] //arr1 
 [u_1,u_2,u_3,u_4,2] //arr2


第五轮: 
 1. 2和2比较相等,1已经从旧数组oldStartIdx位置移动到newStartIdx位置,oldStartIdx++,newStartIdx++ 
 2. 第一步比较成功,进入下一轮 
 3. 第一步比较成功,进入下一轮 
 4. 第一步比较成功,进入下一轮 
 5. 第一步比较成功,进入下一轮 
 //比较成功后,使用u_5表示比较成功的元素 
 [u_4,u_5,u_2,u_1,u_3] //arr1 
 [u_1,u_2,u_3,u_4,u_5] //arr2

用一个gif图来表示

详解Vue2的diff算法

上代码

function diff(prevChildren, nextChildren) {  
 let oldStartIdx = 0 //旧数组起始索引  
 let oldEndIdx = prevChildren.length - 1 //旧数组结束索引  
 let newStartIdx = 0 //新数组其实索引  
 let newEndIdx = nextChildren.length - 1 //新数组结束索引  
 
 let oldStartVNode = prevChildren[oldStartIdx]   
 let oldEndVNode = prevChildren[oldEndIdx]  
 let newStartVNode = nextChildren[newStartIdx]  
 let newEndVNode = nextChildren[newEndIdx]  
 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {   
  if (!oldStartVNode) { 
  //undefined 时前移一位    
  oldStartVNode = prevChildren[++oldStartIdx]   
 } else if (!oldEndVNode) { 
  //undefined 时后移一位    
  oldEndVNode = prevChildren[--oldEndIdx]   
 } else if (oldStartVNode.key === newStartVNode.key ) { //1.开始与开始    
  oldStartVNode = prevChildren[++oldStartIdx]    
  newStartVNode = nextChildren[++newStartIdx]   
 } else if ( oldEndVNode.key === newEndVNode.key ) { //2.结束与结束     
  oldEndVNode = prevChildren[--oldEndIdx]    
  newEndVNode = nextChildren[--newEndIdx]   
 } else if (oldStartVNode.key === newEndVNode.key ) { //3.开始与结束    
  oldStartVNode = prevChildren[++oldStartIdx]    
  newEndVNode = nextChildren[--newEndIdx]   
 } else if (oldEndVNode.key === newStartVNode.key ) { //4.结束与开始     
  oldEndVNode = prevChildren[--oldEndIdx]    
  newStartVNode = nextChildren[++newStartIdx]   
 } else {
  //5.新数组开头元素和旧数组每一个元素对比    
  const idxInOld = prevChildren.findIndex((node) => {     
   if (node && node.key === newStartVNode.key) {      
   return true     
   }     
  })    
  if (idxInOld >= 0) {     
   prevChildren[idxInOld] = undefined    
  } else {     
   //newStartVNode是新元素    
  }    
  newStartVNode = nextChildren[++newStartIdx]   
 }  
 } 
}


diff([1,2,3,4,5],[4,3,5,1,2])

我们发现,上面的算法走完后,如果新旧两个数组只是顺序变化,那么它能完美的diff出差异,但是如果新数组有新增或者删除的时候就不行了,因此我们在while循环完成后需要找出新增或者删除的元素,那怎么知道哪些是新增哪些是删除的元素呢?

在比较的第五步,选取的新数组的第一个元素和旧数组的所有元素逐一对比,这里我们就可以得出了这个数组是否是新增,如果对比相等,那就是位置变换,否则当前元素就是新增的,但是,while循环的条件是oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx,如果是以下情况

let arr1 = [1,2,3,4,5]
let arr2 = [1,2,3,4,5,6,7]

因为循环条件的导致,这里会在5次while后就结束了,因此在数组末尾的6和7永远走不了第五步的插入条件,那如何判断6和7是新增的呢?我们来观察一下while循环结束后的索引

//例子1
let arr1 = [1,2,3,4,5]
let arr2 = [1,2,3,4,5,6,7]
//diff后它们的索引为
oldStartIdx = 5, oldEndIdx = 4
newStartIdx = 5, newEndIdx = 6

//例子2
let arr1 = [1,2,3,4,5]
let arr2 = [4,5,6,7,1,3,2]
//diff后它们的索引为
oldStartIdx = 3, oldEndIdx = 2
newStartIdx = 6, newEndIdx = 5

//例子3
let arr1 = [1,2,3,4,5]
let arr2 = [7,1,3,5,6,4,2]
//diff后它们的索引为
oldStartIdx = 5, oldEndIdx = 4
newStartIdx = 4, newEndIdx = 4

//例子4
let arr1 = [1,2,3,4,5]
let arr2 = [2,4,1,5,7,3,6]
//diff后它们的索引为
oldStartIdx = 3, oldEndIdx = 2
newStartIdx = 6, newEndIdx = 6

我们发现,新增元素的索引和newStartIdx还有newEndIdx是一一对应的

  • 例子1:newStartIdx小于newEndIdx,并且是5和6,而新增元素6对应在arr2的索引为6,新增元素7对应在arr2的索引为7,此时6和7都已经越界出arr1的长度范围
  • 例子2:newStartIdx是大于newEndIdx,没有对应关系
  • 例子3:newStartIdx等于newEndIdx,我们发现arr2索引为4的元素正是新增元素6,但是6次时没有越界出arr1的长度范围,它刚好在数组的最后一个元素
  • 例子4:newStartIdx等于newEndIdx,arr2中索引为6的值正是新增元素6

那么得出的结论就是,如果在while循环结束后,如果newStartIdx是小于或者等于newEndIdx,那么在newStartIdx和newEndIdx索引之间对应的元素就是新增的元素,并且oldStartIdx总是比oldEndIdx大

上面说完了新增,那如果是删除元素呢?看例子

//例子1
let arr1 = [4,3,5,6,7,2,1]
let arr2 = [1,3,5,4,2]
//diff后它们的索引为
oldStartIdx = 3, oldEndIdx = 4
newStartIdx = 3, newStartIdx = 2

//例子2
let arr1 = [7,2,3,5,6,1,4]
let arr2 = [5,1,2,3,4]
//diff后它们的索引为
oldStartIdx = 0, oldEndIdx = 4
newStartIdx = 4, newStartIdx = 3

//例子3
let arr1 = [1,5,4,2,6,7,3]
let arr2 = [4,5,1,2,3]
//diff后它们的索引为
oldStartIdx = 4, oldEndIdx = 5
newStartIdx = 4, newStartIdx = 3

同理新增的观察套路,发现newStartIdx总是比newStartIdx大,并且需要删除的元素总是在oldStartIdx和oldEndIdx对应的索引之间,那么我们只需要把oldStartIdx和oldEndIdx的元素删除即可,那问题来了,像例子2 中oldStartIdx和oldEndIdx索引之间的元素有7,2,3,5,6其中真正需要删除的只有7和6,这样子不就误删了2,3,5么?关键的来了,我们看例子2的2,3,5发现它们走的都是双端比较算法的第五步,第五步写的代码是

const idxInOld = prevChildren.findIndex((node) => {     
  if (node && node.key === newStartVNode.key) {      
   return true     
  }     
 })    
 if (idxInOld >= 0) {     
  prevChildren[idxInOld] = undefined    
 } else {     
 //newStartVNode是新元素    
 }    
 newStartVNode = nextChildren[++newStartIdx]

如果idxInOld>0说明在旧数组中找到了,那么我们将preChildren[idxInOld]设置为undefined,也就是说2,3,5经过diff算法后,它们在arr1中的值已经被替换为了undefined,这里也是就为什么在diff算法开始需要判断!oldStartVNode和!oldEndVnode的原因了,下面我们完善代码

function diff(prevChildren, nextChildren) { 
 let oldStartIdx = 0 //旧数组起始索引 
 let oldEndIdx = prevChildren.length - 1 //旧数组结束索引 
 let newStartIdx = 0 //新数组其实索引 
 let newEndIdx = nextChildren.length - 1 //新数组结束索引 

 let oldStartVNode = prevChildren[oldStartIdx]  
 let oldEndVNode = prevChildren[oldEndIdx] 
 let newStartVNode = nextChildren[newStartIdx] 
 let newEndVNode = nextChildren[newEndIdx] 
 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {  
  if (!oldStartVNode) { //undefined 时前移一位   
   oldStartVNode = prevChildren[++oldStartIdx]  
  } else if (!oldEndVNode) { 
   //undefined 时后移一位   
   oldEndVNode = prevChildren[--oldEndIdx]  
  } else if (oldStartVNode.key === newStartVNode.key ) { //1.开始与开始   
   oldStartVNode = prevChildren[++oldStartIdx]   
   newStartVNode = nextChildren[++newStartIdx]  
  } else if ( oldEndVNode.key === newEndVNode.key ) { //2.结束与结束    
   oldEndVNode = prevChildren[--oldEndIdx]   
   newEndVNode = nextChildren[--newEndIdx]  
  } else if (oldStartVNode.key === newEndVNode.key ) { //3.开始与结束   
   oldStartVNode = prevChildren[++oldStartIdx]   
   newEndVNode = nextChildren[--newEndIdx]  
  } else if (oldEndVNode.key === newStartVNode.key ) { //4.结束与开始    
   oldEndVNode = prevChildren[--oldEndIdx]   
   newStartVNode = nextChildren[++newStartIdx]  
  } else {   
    //5.新数组开头元素和旧数组每一个元素对比   
   const idxInOld = prevChildren.findIndex((node) => {    
    if (node && node.key === newStartVNode.key) {     
     return true    
    }    
   })   
   if (idxInOld >= 0) {    
    prevChildren[idxInOld] = undefined   
   } else {    
    //newStartVNode是新元素   
   }   
   newStartVNode = nextChildren[++newStartIdx]  
  } 
 } 
 if (oldStartIdx > oldEndIdx) {    
 for (; newStartIdx <= newEndIdx; ++newStartIdx) {   
 //新增内容   
 let vnode = nextChildren[newStartIdx]   
 } 
 } else if (newStartIdx > newEndIdx) {  
  for (let i = oldStartIdx; i <= oldEndIdx; i++) {   /
   /删除内容  
 } 
 }
}

diff([1,2,3,4,5],[4,3,5,1,2])

接下来我们使用两个gif图来表示一下diff过程

1.新增元素

详解Vue2的diff算法

2.减少元素

详解Vue2的diff算法

以上就是详解Vue2的diff算法的详细内容,更多关于Vue2的diff算法的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vuex的使用步骤
Jan 06 #Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 #Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 #Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 #Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 #Vue.js
vue3弹出层V3Popup实例详解
Jan 04 #Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 #Vue.js
You might like
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
护理中职生求职信范文
2014/02/24 职场文书
元旦晚会感言
2014/03/12 职场文书
战略合作意向书范本
2014/04/01 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
学校捐款活动总结
2015/05/09 职场文书
结婚司仪主持词
2015/06/29 职场文书
创业计划书之废品回收
2019/09/26 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
MySQL 分组查询的优化方法
2021/05/12 MySQL
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
python三子棋游戏
2022/05/04 Python