11.vue的diff算法原理

#11.vue的diff算法原理| 来源: 网络整理| 查看: 265

概念

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

流程

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

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

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

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

4.优化比较

vue2里面的diff算法优化

头头指针比较

尾尾指针比较

头尾指针比较

尾头指针比较

乱序创建映射进行比较

5.比对查找进行复用

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

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

【本文地址】

今日新闻