Vue2和Vue3中diff算法

46 阅读1分钟

vue2中diff算法

diff算法:新旧虚拟DOM对比,找出差异,最小化更新视图。

虚拟DOM就是一个js,就是比较两个js对象的差异。

image.png

updateChildren方法:

vue2:双端指针对比法

准备四个指针oldS,oldE,newS,newE

  1. 先将oldS和newS比较,如果不相同比较oldS和newE,
  2. 还是不同,就比较oldE和newS
  3. 还是不同,就比较oldE和newE
  4. 每次比较成功后,start点和end点都向中间靠扰
  5. 当新旧节点中有一个start点跑到end点右侧时终止
  6. 若一直匹配不到,则旧虚拟DOM key值去比对较虚拟DOM的key值,如果key相同则复用,并移到新的虚拟DOM位置。

vue3:最长递归子序列 www.bilibili.com/video/BV19M…