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,... }
* 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