Shulou(Shulou.com)06/02 Report--

Editor to share with you what is the use of key in vue. I hope you will get something after reading this article. Let's discuss it together.

What exactly is the use of key?

Let's first take a look at the official explanation:

The key attribute is mainly used in vue's virtual DOM algorithm (diff algorithm) to identify VNodes when comparing the new nodes with the old VNodes.

When not using key, Vue uses an algorithm that minimizes dynamic elements and tries to modify / reuse elements of the same type in place as much as possible

When using key, it rearranges the order of elements based on changes in key and removes / destroys elements that do not exist in key

In the face of these concepts in the clouds, don't worry, take a look at it and have an impression, and then step by step to deeply analyze what key is for.

1 vnode virtual node

Vnode: virtual node, virtual node

Remember the elements in the DOM tree? Documents, elements, nodes

So what is a virtual node?

To put it simply, the node to be rendered to the page by vue is the virtual node.

Ha ha ha

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

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

What you don't understand may be the attribute children, because now div has no child elements, so the value is only "ha". If there are child elements, it will go on and on until the last node, such as

Children: [{/ / child element}, {/ / child element}]

2 vDOM virtual DOM

Like the real DOM, where there is a real node, there is a real DOM, then there is a virtual node, there is a virtual DOM

Of course, the virtual DOM tree is the same, there is also a meaning called VNode tree, this does not need to be entangled, it is probably like this

Convert to a virtual DOM tree:

When a virtual DOM is rendered into a real DOM, it may not be exactly the same. The issue of components is involved here, and we will talk about it later.

3 rendering proc

4 case: insert f

After understanding the previous, let's get to the point here. It takes only one case to fully understand the role of key. Let's start with

Let's take a look at this simple case (without key)

{{item}} data () {return {letters: ['await,' baked, 'cased,' d']}}, methods: {insertF () {this.letters.splice (2,0,'f');}}

As you can see, the purpose of this question is to insert a f between ab and cd

After understanding this simple case, we began to wonder, is there any way to insert into the real DOM?

There are three types:

Method 1 (common method)

Description: delete the previous dom directly and render it again with the new vnode

Method 2 (diff algorithm without key)

Note: this is the default diff algorithm for vue without key, and the corresponding source code is shown in the figure

Vue will judge whether you have key by judging the statement.

Here is what happens when there is no key

Then look at patchUnkeyedChildren () to see the execution process of the diff algorithm.

Here is a brief description:

Get the old vnode and the new vnode

Determine which array is smaller in length (using a smaller array with a larger patch will not cause the array to cross the bounds)

At the beginning of patch, as mentioned in the picture, there are two cases of patch until there is no space (at c of the new vnode).

Old vnode

When a new vnode is created, the old vnode node is uninstalled

End cycle

Method 3 (diff algorithm with key)

By the same token, follow the steps in method 2 to see the patchKeyedChildren () method.

This method is the essence, and it's starting to get complicated.

First patch from scratch and find that it is not the same (here c! = = f), break

From the tail patch, it is found that it is not the same (here c! = = f), break

So far, a, b, c, d have been rendered to the real DOM, only f is missing, so let's start looking for f

Judge:

If the old vnode

Old vnode, uninstall the redundant nodes of the old vnode

If the new vnode = old vnode, this is very complicated, regardless of the order, try to patch to the same item in it, and then uninstall and mount

After reading this article, I believe you have a certain understanding of "what is the use of key in vue". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.