Vue 中的 key 到底有什么用?

轩辕小不懂发布于 2021-12-25 13:51

阅读 470

答案 1

分类：WEB前端开发

Nen 2021-12-25 14:00

- 程序员

key 是给每一个 vnode 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速 (对于简单列表页渲

用,比如可能不会产生过渡效果,或者在某些节点有绑定数据（表单）状态，会出现状态错位。)

diff 算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的 key 与旧节

更准确 : 因为带 key 就不是就地复用了,在 sameNode 函数 a.key '===' b.key 对比中可以避免就地

之前节点的状态被保留下来,会产生一系列的 bug。更快速 : key 的唯一性可以被 Map 数据结构充

时间复杂度仅仅为 O(1),源码如下:

function createKeyToOldIdx(children, beginIdx, endIdx) {

let i, key;

const map = {};

for (i = beginIdx; i <= endIdx; ++i) {

key = children[i].key;

if (isDef(key)) map[key] = i;

}

return map;

}