1.Vue 中的 key 到底有什么用？
1.两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。
2.同一层级的一组节点，他们可以通过唯一的id进行区分。
key的作用主要是为了高效的更新虚拟DOM
key 是给每一个 vnode(javaScript对象) 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速 (对于简单列表页渲染来说 diff 节点也更快。
diff 算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的 key 与旧节点进行比对,从而找到相应旧节点。
更准确 : 因为带 key 就不是就地复用了,在 一些节点函数中 以 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确,
更快速 : key 的唯一性可以被 Map 数据结构充分利用,相比于遍历查找的时间复杂度 O(n),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;
}
2.vue中使用v-for时为什么不能用index作为key？
- 更新DOM的时候会出现性能问题
- 会发生一些状态bug
- React 中的 key 也是如此
1）index作为key，其实就等于不加key
2）index作为key，只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出（这是vue官网的说明）
说明：当以数组的下标index作为key值时 其中一个元素发生了变化 就有可能导致所有元素的key值发生改变 diff算法是比较同级之间的不同 以key来进行关联 当对数组进行下标的变换时，比如删除第一条数据，那么以后所有的Index都会发生改变，那么key自然也跟着全部发生改变， 所以index作为key值是不稳定的，这种不稳定性有可能导致性能的浪费 导致diff无法关联起上一次一样的数据 因此 能不用Index作为key就不要用Index
