Vue中的key的作用
<div v-for="item in list" :key=item.id>{{item.value}}</div>几个关键词:是否有key,key是否唯一,diff性能Vue diff算法中与key相关的逻辑:/*** oldKeyToIdx:旧虚拟节点的key-index的映射对象,如{ key0: index0, key1: index1,... }*...
·
<div v-for="item in list" :key=item.id>{{item.value}}</div>
几个关键词:
是否有key,key是否唯一,diff性能
Vue diff算法中与key相关的逻辑:
/**
* oldKeyToIdx:旧虚拟节点的key-index的映射对象,如{ key0: index0, key1: index1,... }
* oldCh:旧虚拟节点数组
* newStartVnode:待更新的首个Vnode
**/
if (isUndef(oldKeyToIdx)) {// 不存在key-index映射时,创建映射关系
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
}
// 查找待更新Vnode对应的index,有key时,从key-index中根据key查找,无key时,与旧Vnode的每项遍历对比获取。
idxInOld = isDef(newStartVnode.key)
? oldKeyToIdx[newStartVnode.key]
: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
if (isUndef(idxInOld)) { // New element 新Vnode则创建element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
} else {// 更新旧Vnode
/**
* 这里包括以下几种情况:
* 1、无key但新旧index相同;
* 2、有key且key相同且新旧index相同;
* 3、有key且key相同但新旧index不同;
* a、以上三种情况下的Vnode内容相同;b、以上三种情况下的Vnode内容不同;
**/
vnodeToMove = oldCh[idxInOld] // 匹配出的index对应的Vnode
// 匹配出的index对应的Vnode与新Vnode相同时,原地复用(直接patch),不同时创建元素。
if (sameVnode(vnodeToMove, newStartVnode)) {
// 情况组合:1-a,2-a
patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
oldCh[idxInOld] = undefined
canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// 情况组合:1-b,2-b,3
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
由以上分析可得出:
key的作用:
1、元素的唯一性,diff方法中提高了匹配元素index的性能。有key时遍历key-index对象(快),无key时遍历旧Vnode(慢)。
2、在元素list一直变化的情况下,key值设置唯一时,能很精确找到/找不到变更元素,key不唯一时,不能精确找到要匹配的元素。
但对于是原地复用元素还是重新创建元素没有直接影响,只要新旧两个Vnode满足sameVnode,就会复用已有元素。
参考答案:https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1
更多推荐
已为社区贡献6条内容
所有评论(0)