在本文开始前，我们先想想我们在什么时候会用到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值的。