It says in the document:

  • Special attributes for keys are mainly used for Vue attributesVirtual DOM algorithmIs identified when the old and new Nodes are comparedVNodes.
  • If keys are not used, Vue uses a method that minimizes dynamic elements and tries to be in place as much as possibleModify/reuse elements of the same typeIn the algorithm.
  • When you use a key, it changes based on the keyReorder the elementsAnd willRemove/destroy keysNon-existent elements.

Two concepts need to be understood briefly before analyzing Vnode and the virtual DOM

Two concepts to understand

Vnode

Vnode is called a Virtual Node, that is, a Virtual Node, and its essence is a JS object

Take code as an example:

<div class="text" style="font-size: 26px; color: pink">This is a piece of text</div>
Copy the code

// Vue converts the contents of the template into vNodes (objects)

const vNode = {
  type: 'div'.props: {
    class: 'text'.style: {
      'font-size': '26px'.color: 'pink'}},children:'This is a text.'
};
Copy the code

Virtual DOM

The document says:

  • The virtual DOM is a lightweight JavaScript object created by a rendering function.
  • It takes three arguments: an element, an object with data, prop, attR, and so on, and an array.
  • Arrays are where we pass children, which also have all these parameters, and then they can have children, and so on, until we build the entire tree of elements.

Take code as an example:

<div>
  <h1>The title</h1>This is a piece of text<! -- This is a comment -->
</div>
Copy the code

// Convert to the virtual DOM

Cases of inserting content

Here’s an example: When we click a button, we insert the number 5:

During the whole process, we can confirm that vUE does not need to update UL and Button in this internal update, but the list of Li needs to be updated.

In Vue, child element nodes of the same parent element do not re-render the entire list; Because for a list of 1, 2, 3, 4, they’re all the same. To manipulate the real DOM, we simply insert a 5 li in the middle.

How does updating a list work in Vue?

Vue actually calls two different methods with and without keys:

  1. If you have key, use itpatchKeyedChildrenMethods;
  2. There’s no key. It takes that longpatchUnkeyedChildrenMethods;

Vue3 source code for Key judgment

No key operation case, Vue source code practice

In the absence of a key, the vue3 source code is implemented through the patchUnkeyedChildren method

The concrete implementation is as follows:

Step 1: Traverse the cycle to make comparison through patch method Step 2 and Step 3: Determine the length of the old and new nodes to delete or add nodes

In the case of a key, Vue source code

In the case of a key, vue’s operation on it is somewhat complicated and can be divided into five steps.

The details are shown in the figure below:

The first step:

The second step:

Step 3:

Step 4:

Step 5:

conclusion

We can find that Vue will try to use our key to optimize the operation when conducting diFF algorithm, so our efficiency is very low without key. Keeping the same key when inserting or resetting sorts makes the diff algorithm more efficient.