Vue中key的原理

csdn学习资料 jb51学习资料

1. key的作用

key是在Vue中的DOM对象的标识。key被使用在Vue中的虚拟DOM中，并不会出现在真实DOM中。

2. key的属性

2.1 唯一性

每一个用于v-for的元素都应该有一个唯一的key值。这确保了Vue能够识别哪些元素是新的、哪些是旧的，以及哪些元素是需要被移动的。

2.2 性能优化

• 使用key可以帮助Vue在渲染列表时做出更优化的DOM操作。
• 在新旧vnode的diff过程中，key是判断两个节点是否为同一个节点的首要条件，当新旧节点的key都未定义时，两个key都是undefined，则两个key是相等的。
• 设置key可以在diff中更快速地找到对应节点，提高diff速度
• 简单列表的渲染可以不使用key，但是需要保存列表项的状态，就需要使用唯一的key用来准确的定位每一个列表项以及复用其自身的状态，而大部分情况下列表组件都有自己的状态。key在列表渲染中的作用是在复杂的列表渲染中快速准确地找到与newVnode相对应的oldVnode，提升diff效率

// 参见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)
      )
    )
  )
}