Vue中key的作用

前言

<template>
<div class="home">
 <p v-for="key in arr" :key="key">{{ key }}</p>
</div>
</template>
​
<script>
export default {
 data() {
   return {
     arr: [1, 2, 3, 4, 5, 6]
   }
 },
}
</script>

Vue中使用v-for的时候会加入key，但是这个key的作用是什么呢？接下来我们一起来研究下

key的作用

1. Vue在更新的时候触发patch算法中使用到了key。

2. Vue在diff的时候会去判断新老节点，key值会让Vue精确快速的定位到新老节点是否一样，从而进行快速的diff。

3. key值不设置也是不会影响操作的，key不设置的情况新老节点的key为undefined，相互对比是不会影响的，之后会在对比tag节点等一系列操作。

key的工作方式

// 没有key的情况
<p v-for="key in arr">{{ key }}</p>
老节点 ABCDE
新节点 ABCDEF
​
// 没有key，比较tag节点，都是p节点所以Vue认为一样就会进行更新
更新
老节点 A
新节点 A
最后
老节点 BCDE
新节点 BCDEF
​
更新
老节点 B
新节点 B
最后
老节点 CDE
新节点 CDEF
​
更新
老节点 C
新节点 C
最后
老节点 DE
新节点 DEF
​
更新
老节点 D
新节点 D
最后
老节点 E
新节点 EF
​
更新
老节点 E
新节点 E
最后
老节点 
新节点 F
​
插入 F
// 所以没有key的情况需要5次更新和1次插入操作
​
-------------------------------------------------------------------------------
// 有key的情况
<p v-for="key in arr" :key="key">{{ key }}</p>
老节点 ABCDE
新节点 ABCDEF
​
// 有key情况如果key值一样就不会进行更新
所以开头的ABCDE都不会更新
只会插入F
​
// 所以在有key的情况下需要进行1次插入操作。

结语

1. key是判断两个vnode是否相同节点，必要条件之一。
2. 不加key的情况根据上面情况，会执行很多次不必要的操作，加key的情况会执行很少的操作。这也是Vue Diff比较快的原因。