先看下面一个例子:
<template>
<div>
<button @click="clickHandler">删除</button>
<template>
<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>
</template>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
list: [
{
id: 1,
name: 'Person1'
},
{
id: 2,
name: 'Person2'
},
{
id: 3,
name: 'Person3'
},
{
id: 4,
name: 'Person4'
}
]
}
},
methods: {
clickHandler () {
// 删除第二个数据
this.list.splice(1, 1)
}
}
}
</script>
<style scoped>
</style>
当点击按钮时,会删除数组第二个数据,这样就会导致原数组第二个数据之后数据的index发生改变,从而导致person3,和person4节点的更新,增加了额外的性能开销;
如果将key由绑定index改为绑定id,上述性能开销的问题就不会存在,因为更换key绑定时,删除第二个数据,person3和person4的id并未发生改变,dom也不会发生更新;
结论:文章来源:https://www.toymoban.com/news/detail-787993.html
- 对于没有交互的简单数组使用for时,而且数组没有唯一的id时,可考虑使用index作为key;
- 其它情况,尽可能使用唯一的id作为for循环的key值
参考链接文章来源地址https://www.toymoban.com/news/detail-787993.html
到了这里,关于vue for循环不建议使用index作为key的原因的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!