v-for中key属性的作用
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
來源:简书