vue项目列表组件中，key的作用是什么？

[madfour]

Key的作用：

key是给每一个VNode（虚拟节点）的唯一ID，可以依靠key，更准确，更快的拿到oldVnode中对应的vnode节点。

1. 更准确
   因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。

2. 更快
   利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。(这个观点，就是我最初的那个观点。从这个角度看，map会比遍历更快。)

推荐阅读：解析vue2.0的diff算法

解释：
vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。（去建议先了解diff算法）

在交叉对比中，当新节点与旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相对应的旧节点（对应的是一个key => index的map映射）。如果没有找到，就认为是一个新增节点。

若没有key，就会采用遍历查找来找到对应的旧节点。

在不带key的情况下，节点可以进行复用，省去了操作DOM的开销，只适用于简单的无状态组件的渲染。虽然带上唯一的key会增加开销，但是能保证组件的状态正确，而且用户基本感受不到差距。

---

【VUE】官方文档中的key：

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。

而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。