vue训练营3 --- vue中key的作用和工作原理

源码中找答案：src\core\vdom\patch.js - updateChildren()

 

// 比较是否同一节点

function sameVnode (a, b) {  

  return (

    /*

        先比较 两个节点 key 是否相同，

        没有key时，key都是undefined,

        a.key === b.key 会返回true，

        会被认为是同一节点

    */

    a.key === b.key && (

      (

        a.tag === b.tag &&   // 标签相同

        a.isComment === b.isComment &&  // 不是注释

        isDef(a.data) === isDef(b.data) &&  // data 没有发生变化

        sameInputType(a, b)  // 不是input

      ) || (

        isTrue(a.isAsyncPlaceholder) &&

        a.asyncFactory === b.asyncFactory &&

        isUndef(b.asyncFactory.error)

      )

    )

  )

}

 

// 重排算法

  function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {

    // 4个指针

    let oldStartIdx = 0

    let newStartIdx = 0

    let oldEndIdx = oldCh.length - 1

    let oldStartVnode = oldCh[0]

    let oldEndVnode = oldCh[oldEndIdx]

    let newEndIdx = newCh.length - 1

    let newStartVnode = newCh[0]

    let newEndVnode = newCh[newEndIdx]

    let oldKeyToIdx, idxInOld, vnodeToMove, refElm

 

    // removeOnly is a special flag used only by <transition-group>

    // to ensure removed elements stay in correct relative positions

    // during leaving transitions

    const canMove = !removeOnly

 

    if (process.env.NODE_ENV !== 'production') {

      checkDuplicateKeys(newCh)

    }

 

    // 循环条件： 开始索引不能大于结束索引

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {

      // 头尾指针调整

      if (isUndef(oldStartVnode)) {

        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left

      } else if (isUndef(oldEndVnode)) {

        oldEndVnode = oldCh[--oldEndIdx]

      } 

      // 接下去是新旧数组头尾比较4种情况

      // 新旧数组开头相同      

      else if (sameVnode(oldStartVnode, newStartVnode)) {

        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)

        // 索引向后移动一位

        oldStartVnode = oldCh[++oldStartIdx]

        newStartVnode = newCh[++newStartIdx]

      }else if (sameVnode(oldEndVnode, newEndVnode)) {

        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)        

        oldEndVnode = oldCh[--oldEndIdx]

        newEndVnode = newCh[--newEndIdx]

      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right

        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)

        canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))

        oldStartVnode = oldCh[++oldStartIdx]

        newEndVnode = newCh[--newEndIdx]

      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left

        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)

        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)

        oldEndVnode = oldCh[--oldEndIdx]

        newStartVnode = newCh[++newStartIdx]

      } 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

            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]

      }

    }

 

    // 整理工作： 必定有数组还剩下的元素未处理

    if (oldStartIdx > oldEndIdx) {

      // 旧数组结束了，这种情况说明新的数组里还有剩下的节点

      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm

      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)

    } else if (newStartIdx > newEndIdx) {

      // 新的数组结束了，此时删除旧数组里剩下的即可

      removeVnodes(oldCh, oldStartIdx, oldEndIdx)

    }

  }

 

测试代码：

<body>

    <div id="demo">

        <p v-for="item in items" :key="item">{{item}}</p>     </div>

    <script src="../../dist/vue.js"></script>
    <script>

        // 创建实例

        const app = new Vue({

            el: '#demo',

            data: { items: ['a', 'b', 'c', 'd', 'e'] },
            mounted () {

                setTimeout(() => {
                    this.items.splice(2, 0, 'f')
                }, 2000);

            },

        });

    </script>

</body>

 

上面案例重现的是以下过程 ：

 

不使用key：

由于不使用key, 在比较到C时，

在比较key时，新旧节点都是undefined,会认为是同一节点，

会把新数组的F更新到原数组的C上

新数组的C更新到原数组的D上，

新数组的D更新到原数组的E上，

最后新数组剩下了E, 创建E

执行了三次更新，一次创建。

 

使用key：

// 首次循环patch A

A B C D E

A B F C D E

 

// 第2次循环patch B

B C D E

B F C D E

 

// 第3次循环patch E

C D E

F C D E

 

// 第4次循环patch D

C D

F C D

 

// 第5次循环patch C

C 

F C

 

// oldCh全部处理结束，newCh中剩下的F，创建F并插入到C前面

 

当有key值的时候，在旧数组比较到C时，key值与新数组的F不同，

开始从尾部开始比较。

最后新数组只剩下F, 创建了F并插入到C前面。

只执行了一次创建，效率大大提高。

 

结论：

1.key的作用主要是为了更高效的更新虚拟dom,其原理是vue在patch过程中通过key可以判断两个节点是否是同一个，避免频繁更新不同元素，减少dom操作，提供性能。