Why does V-for add key

Unshift () :key=’id’, :key=’index’, unbound key=’index’

Virtual dom (virtual dom)

To understand the diff process, you need to have an understanding of the Virtual DOM, which is briefly described here.

We all know about redraw and backflow. Backflow will cause DOM to be re-rendered, which is very expensive. The virtual DOM replaces the DOM object with an object. When there are multiple dom updates, the DOM will not be updated immediately. Instead, the changes will be saved to an object, and the changes will eventually be rendered at one time

[form]

<div>
    <p>
       span
       span
    </p>
    <span></span>
</div>
Copy the code

The above code is translated into the virtual DOM as follows (without many other attributes, of course)

{
    tag: 'div'.children: [{tag: 'p'.children:[
                {
                    tag:'span'
                },
                {
                    tag:'span } ] }, { tag: 'span'}}]Copy the code

Principle of diff

As the figure clearly illustrates, diff’s comparison process will only be compared at the same level, not across levels. The overall comparison process can be understood as a progressive process. Each level is an array of VNodes. When comparing one of the vNodes, if children are different, the updateChildren function will be entered (its main input parameters are newChildren and oldChildren, NewChildren and oldChildren are vNode arrays of the same class. Then compare the nodes in children one by one, and repeat the above steps for children’s children. Update Dren is the algorithm at the heart of DIff.

Why key

Source code has such a paragraph, a brief code, there is a sameVnode function, its source simplified as follows:

function sameVnode (a, b) {
  return (
    a.key === b.key && a.tag === b.tag
  )
}

Copy the code

In situ reuse

In other words, the criteria for determining whether two nodes are the same node (that is, whether they are reusable) are the same key and the same tag. Take the following diagram for example

The following uses data as an example

const list = [
    {
        id:3.name:'C'
    },
    {
        id:2.name:'B'
    },
    {
        id:1.name:'A'}]Copy the code
<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>
Copy the code

Add data before the first data

const list = [
    {
      	id:4.name:'D'
    },
    {
        id:3.name:'C'
    },
    {
        id:2.name:'B'
    },
    {
        id:1.name:'A'}]Copy the code
  • When no key is added, the keys are undefined and the default is the same. In this case, the comparison will be performed according to the local reuse of the DIFF algorithm

Look at the picture:

In situ reuse

Low performance consumption

Above, D multiplexes C, C multiplexes B, B multiplexes A, adding A. Four rendering

The data before and the data afterkey:undefined index: 0 name:'C'		key:undefined index:0 name:'D'
key:undefined index: 1 name:'B'		key:undefined index:1 name:'C'
key:undefined index: 2 name:'A'		key:undefined index:2 name:'B'
					key:undefined index:3 name:'A'
Copy the code
  • Update render data throughindexThe definition of thekeyTo do before and after data comparison 4 render
The data before and the data afterkey:0 index: 0 name:'C'				key:0 index:0 name:'D'
key:1 index: 1 name:'B'				key:1 index:1 name:'C'
key:2 index: 2 name:'A'				key:2 index:2 name:'B'
						key:3 index:3 name:'A'
Copy the code

By the clear comparison above. All four pieces of data must be re-rendered.

Note: the comparison is for key

  • Update render data throughidThe definition of thekeyLet’s look at the data before and after

Look at the picture:

The data before and the data afterkey:3 index: 0 name:'Cathy'				key:4 index:0 name:'Daisy'
key:2 index: 1 name:'bill'				key:3 index:1 name:'Cathy'
key:1 index: 2 name:'Daisy'				key:2 index:2 name:'bill'
										  key:1 index:3 name:'Joe'
Copy the code

After a before and after comparison, it is found that the last three data are reused, and only one data needs to be updated for rendering

Why not recommend index as key

At work, I find that many people directly use index as the key, and seem to have almost no problems. Indeed, index, as a key, has almost no performance problems. View the current connection, download demo, and change the bound key in index. HTML to index, unbound key, and key to ID to view the effect.

conclusion

  • Diff algorithm uses the strategy of “reuse in place” by default, and is a process of end-to-end cross-comparison.

  • Do not use index as the key. If no key is added, the local reuse policy is adopted by default. You are advised to use ID as the key

  • The “reuse in place” strategy applies only to list rendering outputs that do not depend on child component state or temporary DOM state (for example, form input values).

  • Using a value that uniquely corresponds to an element as a key maximizes dom nodes and improves performance