<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

Logo

前往低代码交流专区

更多推荐