11.vue的diff算法原理

48 阅读1分钟

概念

vue基于虚拟dom做更新,核心是比较两个节点的差异平级比较不考虑跨级比较,内部使用深度递归和双指针的方式进行比较

流程

1.先比较是否是相同节点key tag

2.相同节点比较属性,并复用老节点

3.比较子节点,考虑老节点和新子节点的情况

  • 老节点没有子节点,现有子节点,直接插入新的子节点
  • 老节点有子节点,现没有子节点,直接删除新的子节点
  • 老子节点是文本,现子节点也是文本,直接更新文本节点
  • 老的子节点是列表,新的子节点也是列表更新子节点

4.优化比较

vue2里面的diff算法优化

头头指针比较

image.png

尾尾指针比较

image.png

头尾指针比较

image.png

尾头指针比较

image.png

乱序创建映射进行比较

image.png 5.比对查找进行复用

vue3采用最长递增子序列来实现diff优化

vue2是映射比较,vue3是直接把子序列的AQ节点不移动,直接插入E节点进行优化

image.png