vue中数组删除，页面没重新渲染

创建一个组件时，数据类型是数组，在删除这个数组中的数据时，数组中的数据是对的，但页面渲染的数据却不对。

举例：（不一定复现）

<ul>
<li v-for="(item, index) in peoples" :key="index">{{item.name}}
<span @click="del(index)">删除</span>
</li>
</ul>

<script>
export default {
data() {
return {
peoples: [
{
name: 'tom',
id: '1'
},
{
name: 'kitty',
id: '2'
},
{
name: 'jack',
id: '3'
}
]
}
},
methods: {
del (index) {
this.peoples.splice(index, 1)
}
}
}
</script>

原因：设置v-for时:key用的是index。key的值不是唯一造成的。
解决：:key="item.id"设置成唯一的值
原理：待补