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

In this article, the editor introduces in detail "what is the difference between setting key and not setting key in vue", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "setting key in vue and not setting what is the difference" article can help you solve your doubts.

What is Key

Before we begin, let's restore two actual work scenarios

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

...

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

So what is the logic behind this, and what is the role of key?

In a word,

Key is the only id for each vnode, and it is also an optimization strategy for diff, which can find the corresponding vnode node more accurately and faster according to key.

The logic behind the scene

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 a rerender with a new value is used as a key, a Comp with a new key appears, the old key Comp is removed and the new key Comp triggers rendering

2. The difference between setting key and not setting key

For example:

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,' dashed,'e']}, mounted () {setTimeout () = > {this.items.splice (2,0,'f') / /}, 2000);},})

When key is not used, vue does this:

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?

In fact, it is not, but it is also clearly stated in the document

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 ensure that 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

Third, principle analysis

Source location: core/vdom/patch.js

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 then undefined is always equal to undefined.

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))}

In the updateChildren method, the old and new vnode are diff, and then the comparison result is used to update the real DOM

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.