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

Document, element, node

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

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

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

2 vDOM Virtual DOM

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

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:

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

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

, 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

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

This method is the essence, it starts to get complicated

• 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!