v-for中涉及的key

一、为什么要用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来正确地更新和移动对应的元素，而不是重新渲染整个列表。