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 的作用