深入理解 vue中 key的作用

从源码看key在哪些地方被使用到了，那我们看下2.6.10版本源码

key 主要是在diff算法 中用到, 所以我们可以在vue源码的 src\core\vdom\patch.js目录找到相关代码

主要有以下几处使用到了key

1. sameVnode函数，从代码上可以看到，此处 key 决定了 当前节点是否应该 patch，所以 key不相同的话，节点将会被销毁/添加，因此会执行如下事件

• 完整地触发组件的生命周期钩子
• 触发过渡

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)
      )
    )
  )
}

createKeyToOldIdx 函数，该函数的作用是 当 对比两个子节点数组时，建立 key-index映射代理遍历查找 sameNode.提高性能。

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
}

根据源码中从以上两处使用key的函数可以总结如下几点：

1. key能够决定节点是否应该被删除、添加、修改，当节点被删除、添加时，会发生以下事件

• 完整地触发组件的生命周期钩子
• 触发过渡

2. 对比两个子节点数组时，建立 key-index映射代替遍历查找 sameNode,提高性能。