Vue中key的作用和工作原理？

源码中找答案：https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js
在patch的过程中，会执行patch vnode，vnode过程中会执行updateChildren方法，它会去更新所有的两个新旧子元素，在这个过程中通过key会精准的判断我当前在循环中这两个节点是否是同一个节点，如果没有加key永远都认为是一个相同的节点，就会一直去强硬的更新，没有办法避免频繁更新元素，性能就会很差。

  // 重排算法
  function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    // 四个指针
    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]
      } 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)
    }
  }

测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>key的作用及原理</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <p v-for="item in items" :key="item">{{item}}</p>
        </div>
        
        <script>
            let vm = new Vue({
                el:"#demo",
                data(){
                    return {
                        items:['a','b','c','d','e']
                    }
                },
                mounted(){
                    setTimeout(() => {
                        this.items.splice(2,0,'f');
                    },2000)
                }
            });
        </script>
    </body>
</html>

上面案例重现以下过程

_20200402215445.png

不使用key（从首部开始判断）执行了3次更新操作，还有1次追加操作

_20200402215452.png

如果使用key（首尾判断策略）只执行了一次创建插入操作

// 首次循环 patch A
A  B  C  D  E
A  B  F  C  D  E

// 第二次循环 patch B
B  C  D  E
B  F  C  D  E

// 第三次循环 pactch E
C  D  E
F  C  D  E

// 第四次循环 patch D
C  D
F  C  D

// 第五次循环 patch C
C
F  C

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

结论：

1.key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，减少DOM操作量，提高性能。
2.另外，若不设置key，还可以在列表更新时引发一些隐蔽的bug。
3.vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

Vue中key的作用和工作原理？

测试代码

结论：

推荐阅读更多精彩内容