一、为什么要用key？

1. key可以标识列表中每个元素的唯一性，方便Vue高效地更新虚拟DOM；
2. key主要用于dom diff算法，diff算法是同级比较，比较当前标签上的key和标签名，如果都一样，就只移动元素，不会重新创建和删除；
3. 如果没有key，Vue会使用“就地复用”策略，如果数据项的顺序改变，Vue不会移动DOM元素来匹配数据项的改变，而是简单复用原来位置的每个元素。

<template><div class="about"><ul><li v-for="(item, index) in cityLists"><input type="checkbox" :value="item.city" />{{ item.city }}</li><button @click="remove">删除</button></ul></div>
</template><script>
export default {data() {return {cityLists: [{ id: 1, city: "深圳" },{ id: 2, city: "广州" },{ id: 3, city: "东莞" },],};},methods: {remove() {//注意这里是shift 如果做添加（unshift）也是同样的问题this.cityLists.shift();},},
};
</script>

                                                                                                

如上代码和运行展示，勾选了“深圳”，点击删除的话 ，有key且key不是index的话就可以把“深圳 ”和选中的标识删掉。这里没有正确的设置key，因为标签名都是input，“广州”就直接上去复用了“深圳”的位置，还把人家勾选的标识都复用了。

                                                

选中了“东莞”，点击删除第一个“深圳”，“东莞”的选中标识没了，就是“广州”和“东莞”往上复用了位置。

二、为什么尽量不要使用索引值index作为key？

要是key用index的话运行展示就会和上面的一样，因为index会随着数据的增删而改变，导致key失效。最好使用数据中的唯一标识，如id等，这样当数组发生变化时，就可以根据key来正确地更新和移动对应的元素，而不是重新渲染整个列表。