详解key在Vue列表渲染时究竟起到了什么作用

Vue2+采用diff算法来进行新旧vnode的对比从而更新DOM节点。而通常在我们使用v-for这个指令的时候，Vue会要求你给循环列表的每一项添加唯一的key，那么这个key在渲染列表时究竟起到了什么作用呢？

在解释这一点之前，你最好已经了解Vue的diff算法的具体原理是什么。

Vue2更新真实DOM的操作主要是两种：创建新DOM节点并移除旧DOM节点和更新已存在的DOM节点，这两种方式里创建新DOM节点的开销肯定是远大于更新或移动已有的DOM节点，所以在diff中逻辑都是为了减少新的创建而更多的去复用已有DOM节点来完成DOM的更新。

在新旧vnode的diff过程中，key是判断两个节点是否为同一节点的首要条件：

// 参见Vue2源码 core/vdom/patch.js
function sameVnode (a, b) {
  return (
    a.key === b.key && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

值得注意的是，如果新旧vnode的key值都未定义的话那么两个key都为undefined，a.key === b.key 是成立的

接下来是在updateChildren方法中，这个方法会对新旧vnode进行diff，然后将比对出的结果用来更新真实的DOM

// 参见Vue2源码 core/vdom/patch.js
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  ...
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      ...
    } else if (isUndef(oldEndVnode)) {
      ...
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      ...
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      ...
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      ...
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      ...
    } else {
      if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = isDef(newStartVnode.key)
        ? oldKeyToIdx[newStartVnode.key]        : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) { // New element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
      } else {
        vnodeToMove = oldCh[idxInOld]        if (sameVnode(vnodeToMove, newStartVnode)) {
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          oldCh[idxInOld] = undefined								 
 1/4    1 2 3 4 下一页 尾页