VUE3源码学习笔记-第二部分:Diff算法

107 阅读1分钟

1,减少DOM操作的性能开销

如果我们更新节点时,先卸载所有旧节点,再挂载所有新节点就会产生较大的性能开销,所以需要对新旧节点进行对比和复用。引入key值的概念,如果新旧节点的节点类型和key值都相同,意味着是同一个节点,可以复用。但节点中的内容也可能改变,所以可能需要更新。判断节点需要用两层for循环,外层循环遍历新子节点,内层循环遍历旧子节点,如果节点可复用就更新这个虚拟节点。 采用diff算法可以把时间复杂度优化到O(n)。

2.找到需要移动的元素

我们引入key值,如果两个vnode的类型和key都相同,则我们认为它们是相同节点。假设我们旧的节点是p1->p2->p3。新的节点是p3->p2->p1。我们构建一个创建一个对象map,遍历旧节点,用旧节点的key作为这个对象的属性名,用旧节点作为对应的值。即map = {1:p1,2:p2,3:p3}。再遍历新节点,根据map查找是否有可复用的旧节点,如果有将旧节点索引index和之前新节点在旧节点中最大的索引值lastIndex对比,如果当前索引index小于之前索引lastIndex,说明这个新节点应该放在前一个新节点的前面。如果当前索引index大于之前索引lastIndex,用index的值更新lastIndex。