vue3中key值的作用，为什么不能用索引作为key值

在本文开始前，我们先想想我们在什么时候会用到key值呢，我想一般我们都是在v-for的时候接触到的key值，key值一般都是在列表渲染的时候出现，那么key值具体是干什么的呢，可以用index作为key值吗

虚拟dom

学习过vue我们都知道vue有一个特性：使用虚拟DOM和Diff算法，尽量复用DOM节点
接下来画一个图，简单了解一下vue使用虚拟dom实现的一个流程

我们在第一遍添加数据的时候vue就会将我们的数据放入虚拟DOM里面，添加新的数据时，又会产生新的虚拟DOM，我们新的虚拟DOM会和旧的虚拟DOM进行一个比较，看看有没有什么不同（different）简称Diff算法，发现新的虚拟DOM中有跟旧虚拟DOM中有相同的内容，那么，我们就会直接调用旧的虚拟DOM中的内容（也就是复用），从而提高效率。

key值的作用

我们新虚拟DOM在跟旧的虚拟DOM进行对比的时候，是根据key值的序号，逐个进行对比的

简单点来说就是：
key为1的新虚拟DOM去找key为1的旧的虚拟DOM，看看内容是不是一样，如果一样，就直接复用，如果不一样，就修改为新的内容，或者添加新的内容

索引为什么不能做key值

我们先来看一个简单的例子感受一下索引做key值和id做key值的区别：
索引做key值代码如下：

<template>
  <div>
      <ul>
          <li v-for="item in cars" :key="item.index">
            {{item.name}}
            价格是：<input type="text">
          </li>
          <button  @click="addCar()">添加车位</button>
      </ul>
  </div>
</template>

<script>
export default {
   data() {
    return { cars: [{ id: "1", name: "奥迪"},
                    {id:'2',name:'法拉利'},
                    {id:'3',name:'劳斯莱斯'}],id:" " };
  },
  methods: {
    addCar() {
      this.cars.unshift({ id: "4", name: "大众",produce:'chinese'});
    }
}
}
</script>

<style scoped>

</style>

看一下效果：

现在我们给输入框填入车辆价格：

点击“添加车位”的按钮，我们看一下效果：

我们可以看见我们添加车辆之后，车辆的价格就错位了，我们只是添加了大众车，但是我们还没给它设置价格呢

下面继续看一下id值作为key值的效果：

<template>
  <div>
      <ul>
          <li v-for="item in cars" :key="item.id">
            {{item.name}}
            价格是：<input type="text">
          </li>
          <button  @click="addCar()">添加车位</button>
      </ul>
  </div>
</template>

<script>
export default {
   data() {
    return { cars: [{ id: "1", name: "奥迪"},
                    {id:'2',name:'法拉利'},
                    {id:'3',name:'劳斯莱斯'}],id:" " };
  },
  methods: {
    addCar() {
      this.cars.unshift({ id: "4", name: "大众",produce:'chinese'});
    }
}
}
</script>

<style scoped>

</style>

我们直接在输入框输入价格：

再点击按钮：

我们点击了两次按钮，但是没有出现上面使用索引作为key值的那种错位现象

通过上面两个例子的对比，我想大家也能理解为什么索引不能作为key值了，
索引值是会变化的，而我们的key值需要的是一个固定且唯一的值，就像我们每个人的身份证号码一样。

但我们也不能绝对的说索引不能做key值，如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，我们是可以使用索引做key值的。