先看下面一个例子：
<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也不会发生更新；
结论：
- 对于没有交互的简单数组使用for时，而且数组没有唯一的id时，可考虑使用index作为key；
- 其它情况，尽可能使用唯一的id作为for循环的key值
参考链接
)
