《Vuejs设计与实现》9.6 移除不存在的元素及第9章总结

107 阅读2分钟

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

上一章中,我们提到了如何判断元素是否属于新增,那么这一章我们看一下 如何删除元素。

删除元素也是我们常见的一种情况, 比如列表的删除, 对应的其实是数组里元素删除,当这种情况时,我们就需要移除不存在的元素。

同样我们也来拆解一下这个任务:

  • 我们需要找到被删除的元素
  • 其次我们需要调整新节点的顺序

找到被删除的元素

image.png

我们先假设这样一种情况,就是我们删除中间节点。这时候我们应该怎么找到被删除的元素呢?我认为有2点:

  • 判断新旧节点的length大于新节点的length
  • 遍历旧节点,看新节点是否存在相同的key,如果找不到证明该节点被删除,则我们也删除对应的真实dom

再次排序

当我们发现元素被删除,并执行完成卸载操作的时候,仍旧需要执行排序操作,因为我们确认节点的顺序是否有变化。 这也是一个弊端,在总结中我们再详细说下。

第9章总结

写到这才发现第9章已经完了,现在总结一下。第9章的标题叫做"简单的diff算法",从内容上看也确实简单,主要使用的方法就是遍历节点,对比key。对比一遍新节点的key,判断是否新增。再反着对比一遍旧节点,判断是否删除。

也是因为如此,我们没有保存位置信息,导致我们每次对比完就需要排序,因此导致效率很低,所以才叫简单。

下一章,我们会继续深入diff算法,但不会再是“简单了”