Vue中的v-for为什么要添加唯一的key属性，让我来解答吧

一.没有key

<template>
  <div class="replace">
    <div>
      <input type="text" v-model="name" />
      <button @click="add">添加</button>
    </div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <input type="checkbox" />
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    //这里存放数据
    return {
      name: "",
      newId: 3,
      list: [
        { id: 1, name: "李斯" },
        { id: 2, name: "吕不韦" },
        { id: 3, name: "嬴政" },
      ],
    };
  },
  methods: {
    add() {
      //注意这里是unshift
      this.list.unshift({ id: ++this.newId, name: this.name });
      this.name = "";
    },
  },
};
</script>
<style scoped>
</style>

当选中吕不为时，添加哈喽后选中的确是吕不为，并不是我们想要的结果，我们想要的是当添加楠楠后，一种选中的是李斯

二、有key

<template>
  <div class="replace">
    <div>
      <input type="text" v-model="name" />
      <button @click="add">添加</button>
    </div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <input type="checkbox" />
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    //这里存放数据
    return {
      name: "",
      newId: 3,
      list: [
        { id: 1, name: "李斯" },
        { id: 2, name: "吕不韦" },
        { id: 3, name: "嬴政" },
      ],
    };
  },
  methods: {
    add() {
      //注意这里是unshift
      this.list.unshift({ id: ++this.newId, name: this.name });
      this.name = "";
    },
  },
};
</script>
<style scoped>
</style>

同样当选中吕不为时，添加看好了后依旧选中的是吕不为。

可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果

总结

简单地理解，无：key属性时，状态默认绑定的是位置；有：key属性时，状态根据key的属性值绑定到了相应的数组元素
提高渲染的效率，避免非最后插入数据造成后面的数据都重新渲染
一般推荐使用数组内的字段(保证唯一性)做为key的唯一标识，不推荐直接使用循环的index属性作为key标识