A simple understanding of _javascript techniques of track-by attributes in Vue

This article is an example for us to analyze the attributes of track-by in Vue, for your reference, the specific contents are as follows

Api:http://cn.vuejs.org/guide/list.html

Example Address: https://jsfiddle.net/stardew/f1eju0ku/5/

No track-by: When data is modified, the DOM is rendered again, regardless of whether the value is modified (the console can see)

Add track-by Property: When data is modified, the DOM that contains the unchanged data is not being rendered, and the changed data is in the DOM before it is rendered again.

Two ways to use track-by:

1. Use a unique field in the data, such as _uid

<div id= "Example" >
 <p v-for= "item in Items" track-by= "_uid" >
 {item.message}}
 </p>
 <input type= "button" value= "modify" @click = "Modify"/> <input
 "button" type= "restore" @click = "value="/ >
</div>
//Initial data
items: [
 {_uid: ' 111111 ', message: ' N '},
 {_uid: ' 222222 ', message: ' 2
 {_uid: ' 333333 ', message: ' 333 '},
 {_uid: ' 444444 ', message: ' 444 '},
 {_uid: ' 555555 ', message: ' 555 '}
]
///modified
to Modify:function () {
 This.items = [
 {_uid: ' 111111 ', message: ' {} '},
 {_ UID: ' 666666 ', message: ' 222 '},
 {_uid: ' 333333 ', message: ' 3333 '},
 {_uid: ' 888888 ', message: ' 4444 '}
 , {_uid: ' 999999 ', message: ' 5555 '}
 ]
}

The rendering effect is as follows: Right (no track-by on the left, track-by on the right), _UID and message are unchanged, only the first group meets the conditions.

2. Use of $index, other conditions ditto

<div id= "Example" >
 <p v-for= "item in Items" track-by= "$index" >
 {{item.message}}
 </p>
 <input type= "button" value= "modify" @click = "Modify"/> <input
 "button" type= "restore" @click = "value="/ >
</div>

The rendering effect is as follows, the value of message first to second has not changed, so one or two has not been rendered again.

When both the message and the _uid are used in the template, they are not rendered again when both are unchanged:

<div id= "Example" >
 <p v-for= "item in Items" track-by= "$index" >
 {{item.message}}} {{Item._uid}}
 </p>
 <input type= "button" value= "modify" @click = "Modify"/> <input type=
 "button" value= " Restore "@click =" reduct "/>
</div>

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.