When we use v-for, we must add a necessary key value, and many people use index as the key, in fact, this is not a proper way to do. So what does the key in v-for do? Please look at:

The official answer

When Vue is updating a list of elements rendered using V-for, it defaults to the “update in place” policy. If the order of data items is changed, Vue does not move DOM elements to match the order of data items, but instead updates each element in place and ensures that they are rendered correctly at each index location. Vue 1.x track-by=”$index”

This default mode is efficient, but only for list rendering output that does not depend on child component state or temporary DOM state (for example, form input values).

To give Vue a hint that it can track the identity of each node to reuse and reorder existing elements, you need to provide a unique key attribute for each item:

<div v-for="item in items" v-bind:key="item.id"> <! </div>Copy the code

It is recommended to provide key attributes whenever possible with V-for, unless traversing the output DOM content is simple or you deliberately rely on default behavior for performance gains.

For example,

<div v-for="(item,index) in list" :key="index"> {{item.name}}</div>

list: [
    {
        id: 1,
        name: "name1",
    },
    {
        id: 2,
        name: "name2",
    },
    {
        id: 3,
        name: "name3",
    }
]

Copy the code

How about if we have a bad key vue will return an error, so most people will use index as the key

If we’re adding data


list: [
    {
        id: 1,
        name: "name1",
    },
    {
        id: 2,
        name: "name2",
    },
    {
        id: 3,
        name: "name3",
    },
    {
        id: 4,
        name: "last",
    },
],

Copy the code

In this case, the previous 3 data are directly used to render the last data, and there is no problem with index as key

How about we add one in the middle


list: [
    {
        id: 1,
        name: "name1",
    },
    {
        id: 2,
        name: "name2",
    }, {
        id: 4,
        name: "last",
    },
    {
        id: 3,
        name: "name3",
    }
]

Copy the code

At this point we update the rendered data and compare the data by defining the key with index

Previous data

key index name
0 0 name1
1 1 name2
2 2 name3

The data after the insertion

key index name
0 0 name1
1 1 last
2 2 name2
3 3 name3

It can be found that except the first data can be reused, the other three data need to be re-rendered because the value of key has changed.

At this point, an efficiency issue can be seen, where only one piece of data is inserted, but three pieces of data have to be rerendered

Therefore, we need to find a way to keep the key value of the data in the array unchanged. Therefore, we can not set the key value through index, we should set a unique ID to identify the uniqueness of the data; Let’s compare the efficiency of rendering after modification:

Previous data:


<div v-for="(item,index) in list" :key="item.id"> {{item.name}}</div>

Copy the code
key id index name
1 1 0 name1
2 2 1 name2
3 3 2 name3

Data after intermediate insertion:

key id index name
1 1 0 name1
2 2 1 name2
4 4 2 last
3 3 3 name4

In this comparison, only one data has changed, because the id of the other data has not changed, so the corresponding key has not changed. We just need to render this new piece of data. Therefore, it is recommended to use ID as the key value and V-for