vue2-key的原理与作用

vue2-key的原理与作用

1. 啥是key

• VUE中，key是给vnode一个唯一的ID，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点
• 我们在使用v-for时，需要给每个元素加上一个唯一的ID
• 使用+new Date生成的时间戳作为key，手动强制出发重新渲染

2. 为什么要添加key

• 在使用v-for时，如果不使用key，Vue会采用就地复用的原则，最小化元素的移动，尝试最大程度在适当的地方对相同类型的元素作patch和reuse
• 如果使用key，vue会根据keys的顺序记录元素，曾经拥有了key的元素如果不再出现，会被直接remove或者destroy

3. 设置key一定会提高diff效率么

• 不一定，vue官方文档中说明

当Vue.js用v-for正在更新已渲染多的元素列表时，他会默认用“就地复用”策略，如果数据项的书序被改变，Vue不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

• 这个默认的模式是⾼效的，但是只适⽤于不依赖⼦组件状态或临时 DOM 状态 (例如：表单输⼊值) 的列表渲染输出
• 建议尽可能在使⽤ v-for 时提供 key ，除⾮遍历输出的 DOM 内容⾮常简单，或者是刻意依赖默 认⾏为以获取性能上的提升

4. 原理分析

• 源码位置：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)
             )
         )
     )
}