《Vuejs设计与实现》10.4 添加新元素

120 阅读2分钟

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

上一章中,我们提到了如何如何处理,这一章就是如何添加新元素。在上一章中,我们发现会存在完全无法复用的情况,也就是旧节点与新节点完全不同了,这里面有一种情况就是添加新元素。

比如下图

image.png

我们可以看到新节点列表比旧节点列表多了一个元素,这时候我们仍旧需要先去进行双端对比,找到需要新增的节点。 也就是说在旧的一组子节点中找不到可复用的节点。

那么如何找到呢?

其实很简单,当我们遍历第一轮的时候,我发现新节点的头部在旧节点中完全找不到,这时候我们就应该创建一个头部节点。创建元素的方法不用赘述,然后我们调用相应的方法添加元素即可。

但是这样就够了吗?就正确了吗。

当我们对比完第一轮之后newStartIdx会自然下移一位,但是这个节点是新增的节点,它并没有与旧节点做过对比。比如一种简单的情况,元素重复了,这个心中的节点就是之前的旧节点,这样肯定是不对的,我们需要处理这种情况。

解决的方法我也有两种思路

  • 按书上的思路,当全部遍历结束之后,判断一下是否新增,如果新增,再循环一遍再做一整组双端遍历
  • 按我的思路,当发现新增的时候,先增加元素到旧节点相应位置,再通过break结束循环,然后重新执行整个对比过程。

我觉得,当我们新增之后,可以把新增的节点作为一个旧节点,然后再次和新节点做对比,这时候,我们只需要移动一次就行,顺便还对比了其他所有元素,应该效率会高点吧