v-for中key属性的作用

Posted 2021-02-02 leafarmyarmy

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法。

 

举个index作为key的例子：

 1 const list = [
 2     {
 3         id: 1,
 4         name: ‘test1‘,
 5     },
 6     {
 7         id: 2,
 8         name: ‘test2‘,
 9     },
10     {
11         id: 3,
12         name: ‘test3‘,
13     },
14 ]

1 <div v-for="(item, index) in list" :key="index" >{{item.name}}</div>

下面我们来看一看用index作为key的缺陷

1.在最后一条数据后再加一条数据

 1 const list = [
 2     {
 3         id: 1,
 4         name: ‘test1‘,
 5     },
 6     {
 7         id: 2,
 8         name: ‘test2‘,
 9     },
10     {
11         id: 3,
12         name: ‘test3‘,
13     },
14     {
15         id: 4,
16         name: ‘我是在最后添加的一条数据‘,
17     },
18 ]

运行结果：

之前的数据                         之后的数据

key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插队的那条数据
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2
                                             key: 3  index: 3 name: test3

2.在中间插入一条数据

 1 const list = [
 2     {
 3         id: 1,
 4         name: ‘test1‘,
 5     },
 6     {
 7         id: 4,
 8         name: ‘我是插队的那条数据‘,
 9     }
10     {
11         id: 2,
12         name: ‘test2‘,
13     },
14     {
15         id: 3,
16         name: ‘test3‘,
17     },
18 ]

运行结果：

之前的数据                         之后的数据

key: 1  id: 1 index: 0 name: test1     key: 1  id: 1 index: 0  name: test1
key: 2  id: 2 index: 1 name: test2     key: 4  id: 4 index: 1  name: 我是插队的那条数据
key: 3  id: 3 index: 2 name: test3     key: 2  id: 2 index: 2  name: test2
                                                         key: 3  id: 3 index: 3  name: test3

通过上面清晰的对比,发现用index作为key的方式除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染。然而用每条数据的id作为key来标识数据的唯一性这种方式，只有新添加的数据需要渲染，其他的数据复用之前的数据。显然后一种方式更加的高效。

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

至于其中的原因是因为Virtual DOM 使用Diff算法实现的，详解请参考官方文档或参考https://www.jianshu.com/p/342e2d587e69博客

 

 

本文转载于：

作者：funnycoderstar
链接：https://www.jianshu.com/p/342e2d587e69
來源：简书