vue中key的作用

前言

大家都知道在 vue 的 v-for 中是需要给每个子元素绑定 key 值的,那么原因是为什么呢?

我原本以为,绑定 key 之后可以提高 diff 的速度,但是在实际的操作中会发现非但没有提高速度,反而绑定 key 之后 diff 速度还变慢了。

究其原因,在不绑定 key 的情况下,vue 会进行节点的复用,这就是 vue 文档所说的 默认模式 。

但是这种模式会带来一些隐藏的副作用,比如可能不会产生过渡效果,或者在某些节点有绑定数据(表单)状态,会出现状态错位。VUE 文档也说明了 这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出

但是 key 的作用是什么?

key 是给每一个 vnode 的唯一 id,可以依靠 key,更准确, 更快的拿到 oldVnode 中对应的 vnode 节点。

1.更准确

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

2.更快

利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快。