您的位置:首页 > 其它

v-for中v-bind:key绑定的参数区别

2018-11-27 14:08 337 查看

<li v-for="(item, key, index) in items" class="animate" v-bind:key="item.id">{{item.id}}</li>

1.使用给数组对象绑定的id属性

// items data

items: [ { id: 2, }, { id: 1, }, { id: 3, }, { id: 4, }, ]

2.使用v-for提供的index参数
3.使用v-for提供的key参数

结论:
1.使用v-for渲染元素时,使用元素自身的id属性去绑定key值有利于单个元素的重新渲染
2.若采用其他如v-for提供的index, key等值,在改变渲染出来的DOM结构时,会触发所有元素的重新渲染,当数据过大时,可能会造成性能负担。

总结:
当我们在使用v-for进行渲染时,尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值,这样在当前渲染元素的DOM结构发生变化时,能够单独响应该元素而不触发所有元素的渲染。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: