Vue2中的Diff算法(学习总结)

95 阅读1分钟

diff算法指的是对虚拟dom的对比,所以其本质就是对比两个JS对象

整体流程

111.png

patch流程:

判断是否为同类标签,如果不是同类标签,则直接替换,为同类标签,再判断oldvnode和newvnode是否相等,相等就直接return,不相等再分情况

  1. oldvnode和newvnode都有文本节点:新文本替换旧文本
  2. oldvnode没有子节点,newvnode有子节点:增加新的子节点
  3. oldvnode有子节点,newvnode没有子节点:删除旧的子节点
  4. oldvnode有子节点,newvnode有子节点:进入updateChildren

updateChildren:

最小化更新视图,提高比对性能,进行 同级比对 ,采用的是 首位指针对比法

说明

旧节点首尾节点为oldS,oldE,新虚拟节点首尾节点为newS,endE

比对流程:

  • oldS依次和newS,newE做比对,对比成功后,退出当前比较,将真实dom移动到新虚拟节点中对比成功的位置,oldS标志右移一位,newS/E中对比成功节点向中间移动

  • oldS对比失败,oldE依次和newS,newE做比对,对比成功后,退出当前比较,将真实dom移动到新虚拟节点中对比成功的位置,oldE标志左移一位,newS/E中对比成功节点向中间移动

  • 如果oldS,oldE和newS,newE都匹配不到,则旧虚拟DOM key值去对比新虚拟DOM key值,key值相同则服用,并移动到新虚拟DOM的位置

  • 当新旧节点中有一个start(s)点跑到end(e)点右侧时,终止比较;对比新虚拟DOM中,真实DOM有多余节点则删除,有缺少节点则渲染

1.png