剖析vue常见问题（三）之vue中key的作用和原理

最新推荐文章于 2024-07-04 09:54:33 发布

wh_xmy

最新推荐文章于 2024-07-04 09:54:33 发布

阅读量1.1k

点赞数 1

分类专栏： vue 文章标签： vue key key原理

本文链接：https://blog.csdn.net/wh_xmy/article/details/109603534

版权

vue 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

背景：说到vue中key的作用，大家都知道它可以唯一的确定一个dom元素，从而执行diff算法时更加高效，但是想更加详细的知道具体原因，我们还是需要从源码入手，详见源码：src/core/vdom/patch.js中的updateChildren()方法，当然我们也用demo来说明，demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue key</title>
</head>
<body>
    <div>你知道vue中key的作用和工作原理吗？说说你对它的理解。源码中找答案：src/core/vdom/patch.js中的updateChildren()方法</div>


    <div id="demo">
       <!--此处可以通过去掉key和添加key在源码中打断点来对比调试-->
       <p v-for="item in items" :key="item">{{item}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/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>
</html>

源码中updateChildren()方法如下，可以在第17行while处加上断点进行调试，代码详细如下：

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, elmToMove, 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
    //在下面while处加上断点进行调试
    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)) {
        /*前四种情况其实是指定key的时候，判定为同一个VNode，则直接patchVnode即可，分别比较oldCh以及newCh的两头节点2*2=4种情况*/
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
        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)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        /*
          生成一个key与旧VNode的key对应的哈希表（只有第一次进来undefined的时候会生成，也为后面检测重复的key值做铺垫）
          比如childre是这样的 [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]  beginIdx = 0   endIdx = 2  
          结果生成{key0: 0, key1: 1, key2: 2}
        */
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        /*如果newStartVnode新的VNode节点存在key并且这个key在oldVnode中能找到则返回这个节点的idxInOld（即第几个节点，下标）*/
        idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
        if (isUndef(idxInOld)) { // New element
          /*newStartVnode没有key或者是该key没有在老节点中找到则创建一个新的节点*/
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
          newStartVnode = newCh[++newStartIdx]
        } else {
          /*获取同key的老节点*/
          elmToMove = oldCh[idxInOld]
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !elmToMove) {
            /*如果elmToMove不存在说明之前已经有新节点放入过这个key的Dom中，提示可能存在重复的key，确保v-for的时候item有唯一的key值*/
            warn(
              'It seems there are duplicate keys that is causing an update error. ' +
              'Make sure each v-for item has a unique key.'
            )
          }
          if (sameVnode(elmToMove, newStartVnode)) {
            /*如果新VNode与得到的有相同key的节点是同一个VNode则进行patchVnode*/
            patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
            /*因为已经patchVnode进去了，所以将这个老节点赋值undefined，之后如果还有新节点与该节点key相同可以检测出来提示已有重复的key*/
            oldCh[idxInOld] = undefined
            /*当有标识位canMove实可以直接插入oldStartVnode对应的真实Dom节点前面*/
            canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
            newStartVnode = newCh[++newStartIdx]
          } else {
            // same key but different element. treat as new element
            /*当新的VNode与找到的同样key的VNode不是sameVNode的时候（比如说tag不一样或者是有不一样type的input标签），创建一个新的节点*/
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
            newStartVnode = newCh[++newStartIdx]
          }
        }
      }
    }
    if (oldStartIdx > oldEndIdx) {
      /*全部比较完成以后，发现oldStartIdx > oldEndIdx的话，说明老节点已经遍历完了，新节点比老节点多，所以这时候多出来的新节点需要一个一个创建出来加入到真实Dom中*/
      refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
      addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
    } else if (newStartIdx > newEndIdx) {
      /*如果全部比较完成以后发现newStartIdx > newEndIdx，则说明新节点已经遍历完了，老节点多余新节点，这个时候需要将多余的老节点从真实Dom中移除*/
      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
    }
  }

通过对比循环添加key和不添加key的调试结果我们可以得出以下结论：

1.不添加key的时候，会更新3次dom并且做一次创建插入工作

2.如果添加了key，只做了一次创建插入行为

综上可以知道，key的作用如下：

1.key的主要作用是为了高效的更新虚拟dom，其原理是vue在patch过程中通过key可以精准判断两个节点是否为同一个节点，从而避免频繁更新，使得整个patch过程更加高效，减少dom操作，提高性能。

2.通过设置key还可以避免一些bug.

3.vue中使用相同标签名元素的过渡切换时也使用key属性，主要目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

以上就是vue中key的作用以及其原理，希望对大家有所帮助。

wh_xmy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
剖析vue常见问题（三）之vue中key的作用和原理

背景：说到vue中key的作用，大家都知道它可以唯一的确定一个dom元素，从而执行diff算法时更加高效，但是想更加详细的知道具体原因，我们还是需要从源码入手，详见源码：src/core/vdom/patch.js中的updateChildren()方法，当然我们也用demo来说明，demo如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title
复制链接

扫一扫

专栏目录