canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
} else {
// same key but different element. treat as new element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
}
}
newStartVnode = newCh[++newStartIdx] }
}
...
}
设置key的可以在diff中更快速的找到对应节点，提高diff速度
在updateChildren方法的while循环中，如果头尾交叉对比没有结果，即oldStartVnode存在且oldEndVnode存在且新旧children首尾四个vnode互不相同的条件下，会根据newStartVnode的key去对比oldCh数组中的key，从而找到相应oldVnode
首先通过createKeyToOldIdx方法创建一个关于oldCh的map
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)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
}
这个map中将所有定义了key的oldVnode在数组中的index值作为键值，它的key作为键名存储起来，然后赋给oldKeyToIdx
idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)function findIdxInOld (node, oldCh, start, end) {
for (let i = start; i < end; i++) {
const c = oldCh[i] if (isDef(c) && sameVnode(node, c)) return i
}
}
如果newStartVnode的key存在的话，就去oldKeyToIdx中寻找相同key所对应的index值，这样就能拿到跟newStartVnode的key相同的oldVnode在oldCh数组中的index，即得到了与newStartVnode对应的oldVnode。如果找不到的话，那么idxInOld就为undefined。
而如果newStartVnode并没有设置key，则通过findIdxInOld方法遍历oldCh来获取与newStartVnode互为sameVnode的oldVnode，返回这个oldVnode在oldCh数组的index。（前面介绍过，Vue在更新真实DOM时倾向于真实DOM节点的复用，所以在这里还是会选择去找对应的oldVnode，来更新已有的DOM节点）
这时候设置key的好处就显而易见了，有key存在时我们可以通过map映射快速定位到对应的oldVnode然后进行patch，没有key值时我们需要遍历这个oldCh数组然后去一一进行比较，相比之下肯定是key存在时diff更高效。
接下来就是更新DOM的过程，如果oldCh[idxInOld]存在且与newStartVnode互为sameVnode存在则先更新再移动，否则创建新的element
if (isUndef(idxInOld)) { // New element
createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
