As we all know, one of the great features of Vue is two-way data binding, where once the data changes, the page renders the new data on the page.

However, for v-for rendered list data, the data volume can be very large, and we often need to add, delete and change this data. Suppose we add a single piece of data to the list, and the whole list has to be re-rendered.

The key is designed to avoid this problem as much as possible, so that if we add a piece of data to the list, the page only renders that data.

V – for using in situ reuse strategy by default, the list data changes, he will according to the key value to judge whether a value change, if change, is to render the item, otherwise before reuse elements, if not binding key, every change a data, will render all of the data and can lead to the waste a lot of memory. If you bind a key, every time you modify a piece of data, you will only re-render the change of the changed piece of data, saving a lot of memory. We often use index(the index of an array) as the key, but it’s not recommended. Such as:

list = [
    {
        id: 1,
        num: 1
    },
    {
        id: 2,
        num: 2
    },
    {
        id: 3,
        num: 3
    },
];
Copy the code

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

In this case we used index as the key.

1. Append a line of data to the array

List = [{id: 1, num: '1'}, {id: 2, num: 2}, {id: 3, num: 3}, {id: 4, num: 'new data 4'}].Copy the code

In this case, the first three data pages will not be re-rendered, and the previous data will be reused directly, only the last data will be newly rendered. In this case, index will be used as the key, and there is no problem.

2. Insert a piece of data in the middle of the array

List = [{id: 3, num: 1}, {id: 4, num: 'new data 4}, {id: 2, num:' 2 '}, {id: 3, num: '3'}].Copy the code

When the page renders data, the key defined by index will be compared with:

Index: 0 Num: 1 Key: 0 index: 0 Num: 1 key: 1 index: 0 Num: 1 key: 1 index: 1 num: 2 key: 1 index: 1 num: 'New data 4' Key: 2 index: 2 num: 3 key: 2 index: 2 num: 2 key: 3 index: 3 num: 3Copy the code

Through the clear comparison above, it is found that except for the first data can be reused before, the other three data need to be re-rendered.

Isn’t it amazing that I just inserted one piece of data and then had to re-render all three? And all I want is for that new piece of data to be rendered.

The best way to do this is to use the same item in the array as the key value corresponding to the item, that is, each piece of data has a unique ID to identify the uniqueness of this piece of data. Using id as the key, let’s compare that to inserting a piece of data in the middle. What happens when you render? Such as:

List = [{id: 1, num: 1}, {id: 4, num: 'new data 4}, {id: 2, num: 2}, {id: 3, num: 3}].Copy the code
Key: 1 ID: 1 index: 0 Num: 1 Key: 1 ID: 1 index: 0 Num: 1 key: 2 ID: 2 index: 1 Num: 2 key: 4 ID: 4 index: 1 num: 'New data 4' Key: 3 ID: 3 index: 2 Num: 3 Key: 2 ID: 2 index: 2 num: 2 Key: 3 ID: 3 index: 3 num: 3Copy the code

Now the comparison shows that only one data has changed, that is, the data with ID 4. Therefore, it is ok to render this data new, and the other data will be reused.

For the same reason, when using a map to render a list in React, a key must be added, and id is recommended.

In fact, the real reason is not vue and React, but because Virtual DOM uses Diff algorithm to implement. It is important to remember that rendering the real DOM is expensive. For example, sometimes when we modify some data, rendering directly to the real DOM will cause the whole DOM tree to be redrawn and rearranged. Is it possible that instead of updating the whole DOM, we update only the small piece of DOM that we modify? The Diff algorithm helps us.

We first generate a virtual DOM according to the real DOM. When the data of a node of the Virtual DOM is changed, a new Vnode will be generated. Then Vnode and oldVnode will be compared and the differences will be directly modified in the real DOM. Then set oldVnode to Vnode.

Diff calls a function called Patch to compare the old and new nodes and patch the real DOM as it does so. Refer to the Diff algorithm for details