v-for the key

Use v-forthe time to update the list of elements has been rendered, the list of data modification, he will be based on key values to judge whether a value is modified, if the modification is to re-render this, or elements before reuse. We often use use use index(that is, the array index) as key，one method of use, but in fact this is not recommended, and sometimes the problem may also occur for the following reasons:

An insert data in the array:

List = const [ 
    { 
        ID: . 1 , 
        name: 'test1' , 
    }, 
    { 
        ID: . 4 , 
        name: 'I cut in the piece of data' , 
    } 
    { 
        ID: 2 , 
        name: 'test2' , 
    }, 
    { 
        ID : . 3 , 
        name: 'Test3' , 
    }, 
]

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

At this time, before the first addition data may be multiplexed than the other three data needs to re-render, resulting in performance degradation:

Data before and after the data 

key: 0 index: 0 name: test1 key: index 0: 0 name: test1 
key: 1 index: 1 name: test2 key: 1 index: 1 name: I was cut in the piece of data 
key: index 2: 2 name: Key Test3: index 2: 2 name: test2 
                                 Key: . 3 index: name. 3: Test3

Here is an example of problems:

<div the above mentioned id = "App"> 
    <div> 
      <the INPUT of the type = "text" v-Model = "name"> 
      <the Button @ the Click = "the Add"> Add </ the Button> 
    </ div> 
    <ul> 
      <li v - for = "(Item, index) in List": key = "index">    // V-key or key for the assignment was not added to the index will have problems 
        <INPUT type = "CheckBox"> {{}} item.name, for
       </ Li> 
    </ UL> 
<Script> // Create Vue instance, to give the ViewModel var VM = new new Vue ({ 
      EL: '#app' , 
      Data: { 
        name: '', 
        ChangE: 3 , 
        list: [
    
     
          {id: . 1, name: 'Li Si' }, 
          {ID: 2, name: 'Lu Pu' }, 
          {ID: . 3, name: 'YingZheng' } 
         ] 
      }, 
      Methods: { 
        the Add () { 
         // Note that is the unshift 
          the this .list.unshift ({ID: ++ the this .newId, name: the this .name})
           the this .name = '' 
        } 
      } 
    });
   </ Script> 
  </ div>

Lu was elected in not too, after adding Nannan selected Lisi indeed, is not what we want, when we want to add is Nannan, or Lu is not selected

Plus the key of checkbox with unique content were an association, we will achieve what we want:

<li v-for="(item, i) in list" :key="item.id">
    <input type="checkbox"> {{item.name}}
</li>

and a virtual DOM vue react Diff algorithm of substantially the same first look diff algorithm processing method for operating the same before and after the dom tree node level for comparison, Comparative down layer by layer, as shown below:

For example, below this case, we hope to add a F between B and C:

The default Diff algorithm to implement something like this:

That is updated as C F, D is updated to C, E is updated to D, and finally insert E, this is very inefficient. So we need to make a key that uniquely identifies each node, Diff algorithm can correctly identify this node, finding the right location area to insert a new node.

 

Because vue components using highly multiplexed, can increase the unique identification Key component, this is to efficiently update the virtual DOM. Similarly when using a map rendering react in the list, we must also add key, and the recommended practice is to use id, but also for this reason.

 

Original:  https://www.jianshu.com/p/4bd5e745ce95

https://segmentfault.com/a/1190000013810844?utm_source=tag-newest