CSDN fan account: down and out front online fry powder ZZZ, irregularly send [standard factory will meet questions], [will commonly used algorithm], [will be high concurrency solution], [optimization] and other special columns for everyone to study and watch

Answer from the perspective of the interviewer

Interviewer: “Briefly describe the Diff algorithm in Vue.”

You: When does the Diff algorithm run? The render function calls the render function of the component, render generates a new virtual DOM tree, update the root node of the new virtual DOM tree, and then go inside the update function. Replace _vnode (the old virtual DOM tree) with a new virtual DOM tree, and then save the old virtual DOM tree with a variable. Then call the patch function for diff comparison. Vue follows the following principles during comparison:

1. Try not to move
2. Can modify properties Modify properties
3. Can move dom Move DOM
4. Delete or add the real DOM if necessary

Then the vue diff will be conducted according to the new and old domTree depth first namely, if the parent node is found that different all child nodes of the parent node without having to compare with the parent node dies, if the parent node than found continued down the same than the child nodes of the parent node and then go to the next child nodes of the parent node, So recursive comparison, compare when you will be whether the tag name is consistent, then the element will be the key values are the same, if it is input element will also compare the type type, if same said, if there is a different said, vue diff algorithm will at the end of the dom tree the old record end pointer position, When the head pointer of the new virtual DOM tree is larger than the tail pointer of the new virtual DOM tree, it means that the comparison of the new virtual DOM tree is completed and the diff is finished. Then, vUE will add the real DOM tree of the new virtual DOM tree to the root node to complete the rendering of the real DOM of the page

Figure out the diff operation

Comparison flow of patch functions

Explanation of terms:

1. Same: indicates that the label type and key value of the two virtual nodes are the same, but the input element depends on the type attribute

   Any element can have a key worth

   When a match is found to be the same, it does not mean that vue does not process it, but it does not process the DOM, it only changes the DOM value, and if the DOM type match is not the same, it will remove the DOM, delete it and other operations

2. “New Element” : Creates a real DOM element based on the information provided by a virtual node and mounts it to the ELM attribute of the virtual node

3. “Destroy elements” : means: vnode.elm.remove()

4. Update: A comparison update is performed on two virtual nodes only when the two virtual nodes are the same. The process will be described later.

5. Compare child nodes: Compares the child nodes of two virtual nodes. Details are described later

Detailed process:

1. Root node comparison

patchFunction first compares the root node

If two nodes:

• “Same”, enter ** “update” process **

  1. Assign the real DOM of the old node to the new node: newvNode.elm = oldvNode.elm

  2. Compare the properties of the new node with those of the old node and update them to the real DOM with changes

  3. The current two nodes finish processing, start ** “compare child nodes” **

• Not the same

  1. New node recursive “New element”
  2. Old nodes “destroy elements”

Illustrate the comparison process between old and new virtual DOM trees

“Circle” : virtual DOM tree

“Cubes” : Real DOM tree

Red arrow: Head pointer

Green arrow: tail pointer

Circles of different colors: Virtual DOM representing different tag names

“Circles of different colors” : The number inside the circle represents the key of the virtual DOM

There are no old virtual DOM trees:Run the render function to get a virtual DOM tree. Since diff is depth-first, we will compare the old and new virtual DOM trees of the same layer

Here we can see that since there is no old virtual DOM tree for the first load, vue gets the root node of this component
$El, and then directly traverses the virtual DOM tree to generate the corresponding real DOM, and hangs in the$El in the children of the real DOM root node There is an old virtual DOM tree:

First of all, the diff comparison of two virtual DOM trees follows a comparison sequence:

1. Head to compare
2. The tail end is
3. Head to tail comparison (old, new)
4. End to end comparison (old, new)
5. Find the old tree based on the new tree head node

Why follow this lookup rule?

Since the performance cost of manipulating the real DOM is high, vUE tries to minimize the number of real DOM operations, especially additions and deletions, so it does this:

When “comparing child nodes”, the starting point of vUE is:

• Try not to do anything
• Otherwise, try to change only element attributes
• If not, move elements around instead of deleting and creating them
• If not, delete and create elements

According to the above principles, we then illustrate the diff algorithm in Vue:First, we have two old and new DOM trees. The top one is old, and each virtual DOM node is bound to a corresponding real DOM. The bottom one is the real DOM node, which is now preparing for diff comparison with the old DOM tree

At this point, we first compare [head to head] :Finding that the element tags are the same and the key is the same, bind the node in the new virtual DOM tree below to the real DOM

Then move the old and new head Pointers back:At this time to compare [head] :Same matching rule, so the old and new head Pointers are moved back again:And that’s when we found the presentThe leaderThey are not equal, so they begin to compare:

We find that the 3 and 6 tags have different names and key values, so they are not equal to each other.

We find that although 5 and 8 have the same label, but the key value is different, so they are not equal:

We found that we still couldn’t find any old virtual DOM equal to 8, so vue had no choice but to create a real DOM8:Then we need to adjust the real DOM to the position of the new virtual DOM tree:Now the new head moves backward:3. To make a comparison:

The tags and keys of 3 and 4 do not match, so they are not equal:

3. To compare head to tail:

The tags and keys of 3 and 6 do not match, so they are not equal:

3. To make a comparison:

The keys of 5 and 4 do not match, so they are not equal:

2. To compare end to end:

Don’t match

Compare the old virtual DOM with the new header:

We found 4 in the old virtual DOM tree:In this case, the position of the real DOM should be adjusted according to the position of the new virtual DOM tree:Now the new head moves back:3. To make a comparison:

The key values of 3 and 5 are different

3. To compare head to tail:

3 and 6 have different labels and keys

3. To make a comparison:

5 and 5 have different labels:

2. To compare end to end:

Don’t match

Compare the old tree with the new one:

I didn’t find any old trees that matched it

So vue can’t generate a new real DOM:Adjust the real DOM tree according to the new virtual DOM tree: Move new head:3. To make a comparison:

Don’t match

3. To compare head to tail:

Don’t match

3. To make a comparison:

Don’t match

2. To compare end to end:

Don’t match

Vue can’t generate a new real DOM and reposition it: Remember that it doesn’t erase the old virtual DOM from the real DOM. The garbage collector will delete the old virtual DOM tree itself, so we don’t need to deal with that. So we get the new DOM structure (which doesn’t match the old real DOM, Vue has no choice but to remove it) :Add to a child element of the root element:

1. Complete the rendering

2. “Contrast child node”

   When “comparing child nodes”, the starting point of vUE is:

   • Try not to do anything
   • Otherwise, try to change only element attributes
   • If not, move elements around instead of deleting and creating them
   • If not, delete and create elements