key是给每一个vnode的惟一id,能够依附key,更精确, 更快的拿到oldVnode中对应的vnode节点。
- 更精确
因为带key就不是就地复用了，在sameNode函数 a.key === b.key比照中能够防止就地复用的状况。所以会更加精确。
- 更快
利用key的唯一性生成map对象来获取对应节点，比遍历形式更快。
vue和react都是采纳diff算法来比照新旧虚构节点，从而更新节点。在穿插比照中，当新节点跟旧节点头尾穿插比照没有后果时，会依据新节点的key去比照旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采纳遍历查找的形式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。
不带有key，并且应用简略的模板，基于这个前提下，能够更无效的复用节点，diff速度来看也是不带key更加疾速的，因为带key在增删节点上有耗时。这就是vue文档所说的默认模式。然而这个并不是key作用，而是没有key的状况下能够对节点就地复用，进步性能。这种模式会带来一些暗藏的副作用，比方可能不会产生过渡成果，或者在某些节点有绑定数据（表单）状态，会呈现状态错位。VUE文档也阐明了。还有就是key的作用是为了在diff算法执行时更快的找到对应的节点，进步diff速度，然而这个含有争议。
整顿来自木易杨
key的作用