A brief discussion on the role and working principle of key in Vue3

What is the function of this key attribute? Let’s first look at the official explanation:

• The kekey attribute is mainly used in Vue's virtual DOM diff algorithm to identify Vnodes when comparing new and old nodes;
• If you don't use keys, Vue will use an algorithm that minimizes dynamic elements and tries to modify/reuse elements of the same type in place as much as possible.
• When using a key, it will rearrange the order of elements based on the change of the key, and will remove/destroy the elements that do not exist in the key.
  

Let me briefly mention my understanding of VNode:

• The full name of VNode is Virtual Node, which is a virtual node;
• The essence of Vnode is a JavaScript object;
• In fact, in Vue, both components and individual elements are represented as VNodes.

For example:

<div class="title" style="color: red;">Helllo World</div>
// Actually in Vue it will be represented as:
const VNode = {
    type: "div",
    props: {
        class: "title",
        style: {
            color: "red"        
        }    
    },
    children: "Hello World" // If the div contains other tags, they will be converted to children in the same way}

Under what circumstances is the insertion of f most efficient?

Ideas:

• Re-render once (consumes a lot of performance)
• The previous VNode remains unchanged and is re-rendered from the insertion position (consuming a large amount of performance)
• All VNnodes are re-rendered, only the newly added VNodes need to be inserted (best performance)

Conclusion: If you want the highest performance, you must key the new and old VNodes, compare the old VNodes with the new VNodes by key value, and find out which VNode needs to be added or deleted. Other VNodes should remain unchanged as much as possible. The process of comparing the new and old VNodes is the diff algorithm.

Vue actually calls two different methods for keys and no keys. Let's take a look at the source code: (packages\runtime-core\src\renderer)

In the case of a key, execute the patchKeyedChildren method:

If there is no key value, execute the patchUnkeyedChildren method:

Note: When there is no key value, if there are too many lists, patches will be performed one by one, which will consume a lot of performance. Then adding the key value will save a lot of performance loss.

in conclusion:

Therefore, the key value plays a role when the DOM tree performs the diff algorithm. One function is to determine whether the new and old Vnodes are the same, so as to perform the next step of comparison and rendering. The other function is to determine whether the component can be reused and whether it needs to be re-rendered.

This is the end of this article about the role and working principle of key in Vue3. For more information about the role and working principle of key in Vue3, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!