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