《Vuejs设计与实现》10.1 双端比较的原理(下)

103 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第5天,点击查看活动详情

上一章中,提到了双端比较的基本原理和过程,在这种比较中,我们可以减少dom的移动,现在我们看看如何处理4个位置变量

image.png

当我们移动完节点之后,或者说将上面的四步用过一轮之后,我们找到了需要移动的元素,这时候我们就可以重新修改,位置变量,然后再次循环进行对比,可以看到,此时仅需要对比三个元素即可。

这时候就需要注意循环遍历的条件,我认为不论对于新旧节点列表这个条件应该是EndIdx等于StartIdx,也就是尾部节点的下标大于头部节点。

当我们每次完成一轮比对,头部节点下移,尾部节点上移,如果没有限制条件,最终两个将会重合,但是当两个重合的时候,我们就没必要对比,此时已经对比结束了。如下图所示

image.png

但是书中却没有这样写,书中写了这样一种情况:

image.png

就是尾节点大于头节点的时候,表示这个列表从头到尾遍历过一遍了,之所以需要这样遍历,因为还存在一种情况,就是最后这个节点被替换了,因此我们需要从新列表对比一遍,旧列表对比一遍,也就是让EndIdx大于StartIdx才能算完整遍历。

很明显这样的效率明显要高于之前的简单diff,因为随着每次遍历,我们都能减少2次遍历次数,因此我觉得这个算法的时间复杂度是log2n