不太理解key的重要性

Question

看到老师在这篇回答
https://coding.imooc.com/learn/questiondetail/195765.html
中说了key的作用，但是我还是不太明白。

我自己花了一张图，这里我把 li3 删除掉。

然后在updateChildren过程中，在 li3 与 li4 的比较时会进入 sameVnode(oldStartVnode, newStartVnode) 这个判断，然后 旧的 li3 节点会复用 li4 的 chlidren，然后 li3 仍然留在文档中。

老师说的会导致错误状态的复用是不是指 li3 本身的一些属性没有更新，还是沿用之前的，并且此时文档上的 li3 被错误的认为就是更新后的 li4？

我好像对key理解的还不够，希望老师能详细解答一下。

Answer 1

ustbhuangyi 2020-07-11 20:36:54

如果不用 key，你这个例子删除的虽然是 li3，但根据双端比较算法，li3 到 li4 会认为是同一个节点，然后执行 patchVnode，而 li4 被删除。最终的 DOM 就是 li1，li2，li3，而不是预期的  li1, li2，li4

• 提问者 weixin_慕娘7037311 #1

  感谢老师

• 前端工程师666777888 #2

  不加key，好像并没出现错误。
  老师，能举个不加key，删除列表的一项后。出现错误的例子吗？