vue列表渲染中key的作用

首先官方推荐使用key，应该理解为使用唯一id作为key。

key的作用就是diff算法更新组件时判断两个节点是否相同，相同就复用，不相同就删除旧的创建新的。

正是因为带唯一key时每次更新都不能找到可以复用的节点，不但要销毁和创建vnode，在DOM里添加移除节点对性能影响较大，所以通常对数据非常多的列表来说“不带key可能性能更好”。

那为什么还要建议带key呢？因为这种模式只适用于渲染简单的无状态列表。对于大多数场景来说，列表组件都有自己的状态。

举个例子：一个新闻列表，可以点击标记为‘已读’，然后可以通过tab切换为“娱乐新闻”或“社会新闻”。

不带key的情况下，在“娱乐新闻”下选中第二项为已读，然后切换到“社会新闻“，”社会新闻“的第二项也会标记成已读，因为这里复用了组件，保留了之前的状态。

要解决这个问题，可以在列表的每一项带上唯一key就行了。