Before the start of this article, let's think about when we will use the key value. I think we usually come into contact with the key value during v-for. The key value usually appears when the list is rendered. So what exactly does the key value do? Can index be used as the key value?
virtual dom
After learning vue, we all know that vue has a feature: use virtual DOM and Diff algorithm to reuse DOM nodes as much as possible.
Next, draw a picture to briefly understand a process implemented by vue using virtual dom.
When adding data in the first pass, vue It will put our data into the virtual DOM. When new data is added, a new virtual DOM will be generated. Our new virtual DOM will be compared with the old virtual DOM to see if there is any difference (different) Referred to as the Diff algorithm , it is found that the new virtual DOM has the same content as the old virtual DOM, then we will directly call the content in the old virtual DOM (that is, reuse), thereby improving efficiency.
The role of the key value
When our new virtual DOM is compared with the old virtual DOM, we compare them one by one according to the serial number of the key value
To put it simply:
the new virtual DOM with a key of 1 goes to the old virtual DOM with a key of 1 to see if the content is the same. If it is the same, it will be reused directly. or add new content
Why can't the index be used as a key value
Let's first look at a simple example to feel the difference between the key value of the index and the key value of the id:
the code of the key value of the index is as follows:
<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>
Take a look at the effect:
Now we fill in the vehicle price in the input box:
click the "Add parking space" button, let's take a look at the effect:
We can see that after we add the vehicle, the price of the vehicle is misplaced. We just added the Volkswagen, but we haven't set the price for it yet.
Let's continue to look at the effect of the id value as the key value:
<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>
We directly enter the price in the input box:
click the button again:
we click the button twice, but there is no such misplacement phenomenon that uses the index as the key value above
Through the comparison of the above two examples, I think everyone can understand why the index cannot be used as the key value, the
index value will change, and our key value needs a fixed and unique value , just like each of us ID number is the same.
But we cannot absolutely say that the index cannot be used as the key value. If there is no reverse order addition and deletion of data, such as reverse sequence operations, and it is only used to render the list for display, we can use the index as the key value.