Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to understand key in VUE v-for. Many people may not know much about it. In order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

When you do not add key to the tag of v-for.

About v-for 's key add {{item.name}} const app = new Vue ({el:'# app', data () {return {name:', newId: 3, list: [{id: 1, name: 'Zhang San'}) {id: 2, name:'Li Si'}, {id: 3, name: 'Wang Wu'}],} }, computed: {}, methods: {add () {/ / Note here is unshift this.list.unshift ({id: + + this.newId, name: this.name}) this.name =''}},})

After we selected Li Si and added Zhao Liu, the person selected became Zhang San.

Let's take a look at the situation where v-for has key:

About v-for 's key add {{item.name}} const app = new Vue ({el:'# app', data () {return {name:', newId: 3, list: [{id: 1, name: 'Zhang San'}) {id: 2, name:'Li Si'}, {id: 3, name: 'Wang Wu'}],} }, computed: {}, methods: {add () {/ / Note here is unshift this.list.unshift ({id: + + this.newId, name: this.name}) this.name =''}},})

After we selected Li Si and added Zhao Liu, the person selected was still Li Si, no change.

This is due to the underlying Diff algorithm of vue. The processing method of the diff algorithm is to compare the nodes in the same layer of the dom tree before and after the operation, layer by layer, as shown below:

When there are many same nodes in a layer, that is, list nodes, the update process of the Diff algorithm follows the above principle by default.

For example, this is the case:

We want to be able to add a FMagneDiff algorithm between B and C, which works like this by default:

That is to say, it is very inefficient to update C into FMague D and E into D, and then insert E at last.

So we need to use key to make a unique identification for each node, Diff algorithm can correctly identify this node, find the correct location area to insert a new node.

List loop in vue needs to be added: key= "unique identity" unique identification can be id index in item, etc., because the high reuse of vue components increases the uniqueness of Key to identify the uniqueness of components, in order to better distinguish the role of each component key is mainly to efficiently update the virtual DOM.

After reading the above, do you have any further understanding of how to understand key in VUE v-for? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.