详解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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
php中explode与split的区别介绍
2012/10/03 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
简单的Python抓taobao图片爬虫
2014/10/26 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python基础梳理(一)(推荐)
2019/04/06 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
夜大自我鉴定
2013/10/31 职场文书
中国梦口号
2014/06/13 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
刘公岛导游词
2015/02/05 职场文书
小学感恩主题班会
2015/08/12 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS