Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the principle of key in vue v-for". In daily operation, I believe that many people have doubts about the principle of key in vue v-for. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubt of "what is the principle of key in vue v-for?" Next, please follow the editor to study!

What is key?

Common ways

...

two。 Timestamp: the timestamp generated by + new Date () is used as key to manually force the re-rendering to be triggered.

This is how we usually use it, but what is the logic behind key? Key is the only id for each vnode, and it is also an optimization strategy for diff. According to key, the corresponding vnode node can be found more accurately and faster.

Logic

When we are using v-for, we need to add key to the unit

If you don't use key,Vue, you will adopt the principle of local restoration: minimize the movement of element, and try to do patch or reuse for the same type of element in the same place as much as possible.

If key,Vue is used, the element will be recorded in the order of the keys. If the element that once owned the key does not appear again, it will be directly remove or destoryed.

Use the timestamp generated by + new Date () as key to manually force the re-rendering to be triggered.

When the rerender with the new value is used as the key, the Component with the new key appears, the old key Component is removed and the new key Component triggers the rendering.

The difference between setting key and not setting key

Create an instance and insert data into the items array 2 seconds later

{{item}}

/ / create an instance const app = new Vue ({el:'# demo', data: {items: ['await,' baked, 'cased,' dumped,'e']}, mounted () {setTimeout () = > {this.items.splice (2,0,'f')}, 2000) },)

Without using key:

Analyze the overall process:

Compare the same type of nodes with patch, but the data are the same, and no dom operation occurs.

Compare BPerry B, the same type of node, patch, but the data is the same, no dom operation occurs.

Compare CPowerF, the same type of node, patch, different data, dom operation occurs

Compare the same type of node with patch, the data is different, and the dom operation occurs.

Compare the same type of nodes with patch, and the dom operation occurs when the data is different.

End of loop, insert E into DOM

A total of 3 updates and 1 insert occurred

In the case of using key: vue will do this:

Compare the same type of nodes with patch, but the data are the same, and no dom operation occurs.

Compare BPerry B, the same type of node, patch, but the data is the same, no dom operation occurs.

Compare CPowerF, different types of nodes

Compare E and E, the same type of nodes, patch, but the data are the same, no dom operation occurs

Compare D and D, the same type of nodes, patch, but the data is the same, no dom operation occurs

Compare C and C, the same type of nodes, patch, but the data is the same, no dom operation occurs

End of loop, insert F before C

A total of 0 updates and 1 insert occurred

Through the above two small examples, it can be seen that setting key can greatly reduce the DOM operation on the page and improve the efficiency of diff.

Does setting the key value necessarily improve the efficiency of diff?

When Vue.js is updating the list of rendered elements with v-for, it defaults to the "reuse in place" policy.

If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but simply reuse each element here

And make sure it displays each element that has been rendered under a specific index

This default mode is efficient, but only applies to list rendered output that does not depend on subcomponent state or temporary DOM state (for example, form input values)

It is recommended to provide key when using v-for whenever possible, unless traversing the output DOM content is very simple, or deliberately relies on the default behavior for performance improvement

Principle Analysis function sameVnode (a, b) {return (a.key = b.key & & (a.tag = b.tag & & a.isComment = = b.isComment & & isDef (a.data) = isDef (b.data) & & sameInputType (a) B)) | | (isTrue (a.isAsyncPlaceholder) & & a.asyncFactory = b.asyncFactory & & isUndef (b.asyncFactory.error)}

To judge whether it is the same key, the first thing to judge is whether the key value is equal. If key is not set, then key is undefined, and undefined is always equal to undefined.

Function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {. While (oldStartIdx

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.