Vue中的diff算法

Posted 2023-03-04 曾胖神父

diff算法介绍

diff算法是一种高效对比算法。diff算法在组件更新即响应式数据监控到数据的改变，重新生成虚拟DOM树的时候调用，然后通过diff算法计算出前后虚拟dom树的差异点，更新dom时只更新变化的部分。

直接比较和修改两个数的复杂度为什么是n的3次方？

老树的每一个节点都去遍历新树的节点，直到找到新树对应的节点，那么这个流程的时间复杂度就是O(n的平方)，再紧接着找到不同之后，再计算最短修改距离然后修改节点，最后得出最终的复杂度为O(n的三次方)

diff算法存在的目的

当页面包含大量节点的时候，如果使用暴力方法进行虚拟DOM对比更新，那么就会依次执行极大数量的比较，这是无法承受的，所以需要diff这种高效对比算法进行优化。

diff的策略是什么？有什么根据？

1，Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计，因此仅进行同层比较。
2，如果父节点不同，放弃对子节点的比较，直接删除旧节点然后添加新的节点重新渲染
3，如果子节点有变化，虚拟DOM不会计算变化的是什么，而是重新渲染
4，同级多个节点可通过唯一的key对比异同

diff流程是什么？

新旧节点不同：创建新节点——》更新父占位符节点——》删除旧节点
新旧节点相同且没有子节点：不变。
新旧节点相同且都有子节点：遍历子节点同级比较，做移动，添加，删除三个操作

Vue3与Vue2的diff算法区别与优化

1，编译模板时进行静态分析，标记动态节点，diff对比差异时仅对比动态节点（相比Vue2性能提升明显）
2，通过对更新前后子节点数组建立映射表的方式，将O(n的2次方)复杂度的遍历降低到O(n)
3, 使用最长递增序列优化对比流程，可以最大程度的减少DOM的移动，达到最少的DOM操作