In-depth analysis of the key in vue to see what the key can be used for!

What is the use of key? The following article will give you an in-depth analysis of the key in vue to see what the key can be used for. I hope it will be helpful to everyone!

In-depth analysis of key in vue

What is the use of key?

• Let’s look at the official explanation first:
  • The key attribute is mainly used in vue's virtual DOM algorithm (diff algorithm), and is not used when identifying new and old nodes when comparing them VNodes
  • key, 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
  • Use key, it will rearrange the order of elements based on key changes, and will remove/destroy elements that have a keythat do not exist

Faced with these vague concepts, don’t be impatient. Read it once and get an impression. Next, we will analyze in depth step by step what the key is used for. [Related recommendations: "vue.js Tutorial"]

1 vnode virtual node

##vnode: virtual node, virtual node

Do you still remember the elements in the DOM tree?

Document, element, node

So what is a virtual node?

Simply put, the node to be rendered by vue on the page is a virtual node

  <template id="my-app">
    <div class="title" style="font-size: 30px; color: red;">哈哈哈</div>
  </template>

The div here is a virtual node. In vue, it exists in this form

    const vnode = {
      type: "div",
      props: {
        class: "title",
        style: {
          "font-size": "30px",
          color: "red",
        },
      },
      children: "哈哈哈",
    };

What I don’t understand may be the children attribute, because now the div has no child elements, so the value is only "hahaha". If there are child elements, then it will be nested in a matryoshka until the last node. , such as

      children: [
        {
          // 子元素
        },
        {
          // 子元素
        }
      ],

2 vDOM Virtual DOM

is the same as real DOM. If there are real nodes, there will be real DOM. Then if there are virtual nodes, then There is a virtual DOM

Of course, the same goes for a virtual DOM tree. There is also a VNode tree, which means there is no need to worry about it. It is probably as follows

  <template id="my-app">
    <div>
      <div>
        <p></p>
        <p></p>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </template>

Convert to a virtual DOM tree:

When the virtual DOM is rendered into the real DOM, it is not necessarily exactly the same. This involves components, which I will talk about later when I have the opportunity

3 Rendering process

##4 Case: Insert fAfter understanding the previous ones, let’s get down to business. Only one case is needed to fully understand the role of key. Let’s start with

Let’s look at this simple case (without adding key)

    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>

      data() {
        return {
          letters: ['a', 'b', 'c', 'd']
        }
      },
      methods: {
        insertF() {
          this.letters.splice(2, 0, 'f');
        }
      },

It can be seen that the purpose of this question is to insert an f

between ab and cd. After understanding this simple case, we started to think about whether there is any way to insert it into the real DOM. What?

There are three following types:

Method one (ordinary method)

Instructions: Directly Delete the previous dom and re-render it with the new vnode

Method 2 (diff algorithm without key)

Note: This is vue's default diff algorithm when there is no key. The corresponding source code is as shown in the figure.

Vue will judge whether you have brought the key through the judgment statement

The following is the situation when there is no key

Then check

patchUnkeyedChildren()

, you can view the execution process of the diff algorithmHere is a brief description:

Get the old vnode and the new vnode
Determine which of the two arrays has the smaller length (use the smaller one Patching a larger array will not cause the array to go out of bounds)
Start patching, as mentioned in the picture, and continue patching until there is no space (at c of the new vnode) , divided into two situations

• old vnode

When old vnode > new vnode, uninstall the old vnode node

##End the cycle

Method three (diff algorithm with key)

Similarly, you can view it by following the steps of method twopatchKeyedChildren()

Method

This method is the essence, it starts to get complicated

First patch from the beginning, when differences are found (here: c !== f), break

• Patch from the tail, when it is found to be different (here c !== f), break

  So far, a, b, c, d have is rendered into the real DOM, the only difference is f, let’s start looking for f

• to judge:

  • If the old vnode

  • If new vnode > old vnode, uninstall the redundant nodes of the old vnode

  • If new vnode = old vnode, this is very complicated. Regardless of the order, try to patch the same items in it, and then perform uninstall and mount operations

Summary: At this point, the entire case process has been completely gone through. The author can only understand this. This article combines coderwhy’s video and some of my own thoughts (video source: https://ke.qq.com/course /3453141), so there may be something wrong, everyone is welcome to criticize and correct me

[Related recommendations: "vue.js tutorial"]

The above is the detailed content of In-depth analysis of the key in vue to see what the key can be used for!. For more information, please follow other related articles on the PHP Chinese website!