概念
vue基于虚拟dom做更新,核心是比较两个节点的差异,平级比较不考虑跨级比较,内部使用深度递归和双指针的方式进行比较
流程
1.先比较是否是相同节点key tag
2.相同节点比较属性,并复用老节点
3.比较子节点,考虑老节点和新子节点的情况
- 老节点没有子节点,现有子节点,直接插入新的子节点
- 老节点有子节点,现没有子节点,直接删除新的子节点
- 老子节点是文本,现子节点也是文本,直接更新文本节点
- 老的子节点是列表,新的子节点也是列表,更新子节点
4.优化比较
vue2里面的diff算法优化
头头指针比较
尾尾指针比较
头尾指针比较
尾头指针比较
乱序创建映射进行比较
5.比对查找进行复用
vue3采用最长递增子序列来实现diff优化
vue2是映射比较,vue3是直接把子序列的AQ节点不移动,直接插入E节点进行优化