What is the virtual DOM

Virtual DOM is a tree based on JavaScript objects (node nodes), and object attributes are used to describe nodes. It is an abstraction of real DOM, and the tree is mapped to the real environment through some column operations

A virtual DOM is an object that represents a DOM tree, usually containing tag names, tag attributes, event listeners and child elements, and other attributes

Why do we have a virtual DOM

Virtual DOM is created to better render virtual nodes to views, that is, to turn virtual DOM into real DOM nodes and improve the rendering performance of views.

** In real DOM manipulation **

In traditional development, when native JS or JQ manipulates the DOM, the browser runs through the process from building the DOM tree to the end. In one operation, I need to update 10 DOM nodes. The browser receives the first DOM request and doesn’t know that there are nine more updates, so it immediately executes the process and ends up doing 10. For example, after the first calculation, the next DOM update request changes the coordinate value of the node, making the previous calculation useless. Compute DOM node coordinate values and so on is wasted performance. DOM operation cost is expensive, frequent operation will still appear page lag, affecting user experience.

** Use virtual DOM **

The virtual DOM is designed to solve browser performance problems. If there are 10 DOM updates in one operation, the virtual DOM will not immediately operate the DOM, but save the 10 updates to a local JS object, and finally insert the JS object into the DOM tree once, and then perform subsequent operations to avoid a lot of unnecessary calculation. Therefore, the advantage of using JS objects to simulate DOM nodes is that the update of the page can be reflected in all JS objects (virtual DOM) first, and the speed of operating JS objects in memory is obviously faster. After the update is completed, the final JS objects will be mapped into real DOM, and then submitted to the browser to draw.

Benefits of the Virtual DOM (why virtual DOM is faster than DOM)

1. Reduce DOM operations:

The virtual DOM can combine multiple operations into a single operation, reducing the number of DOM operations. For example, if you add 1000 nodes, literally one after the other, the virtual DOM uses DOM diff to eliminate unnecessary operations and reduce the scope of DOM operations. If you add 1000 nodes, only 10 nodes are new

2. Cross-platform rendering:

The virtual DOM can not only become a DOM, but also small programs, iOS applications, android applications, because the virtual DOM is essentially just a JS object

Disadvantages of the virtual DOM

Additional creation functions, such as Create Element or H, are required, but can be simplified to XML writing using JSX

DOM diff

DOM Diff is an algorithm for the comparison of two virtual DOM trees: Diff algorithm only compares virtual nodes of the same level of two trees, recursively, and finally realizes the update of the whole DOM tree.

Three steps of diff algorithm:

  1. Using JS object to represent the structure of the DOM tree, and then according to this object to build a real DOM tree, inserted into the document
  2. When the state changes, a new object tree is reconstructed. The new tree is then compared to the old tree, recording the difference between the two trees
  3. Finally, the recorded differences are applied to the real DOM tree that is built and the view is updated

DOM Diff makes comparisons at three levels

1.Tree Diff

  • Firstly, the hierarchy of the tree structure is compared, and all child nodes under the same parent node are compared.
  • Component Diff: Component Diff: Component Diff: Component Diff: Component Diff: Component Diff: Component Diff: Component Diff
  • If the node is a tag or an Element, do Element Diff.

2. Omponent Diff

  • If the components are of the same type, the structure of the virtual DOM continues to be compared according to the hierarchy.
  • If the component type is different, replace everything for the entire component

3. Element Diff

  • If the node is a native tag, replace or update the attribute by comparing the same tag name

  • Then enter the tag descendant recursion Tree Diff

DOM Diff

When comparing elements, diff provides three node operations when the DOM is at the same level: delete, Insert, and Move

Key value problem

When you don’t use the key, you want to remove the second square, you want to leave the triangle and the circle, but the real result is the triangle and the box

That’s because Vue did two things

* Turns the 2 into the 3 * deletes the 3Copy the code

There are two arrays [1,2,3] and [1,3].

Humans would say, well, that’s just a two missing

But instead of just deleting the second one, the computer goes through the array:

First, compare 1 and 1, find [1 does not change "; Then compare 2 and 3 and find that "2 becomes 3"; Finally, the comparison between undefined and 3 shows that [3 is deleted ". So the computer says, "Two becomes three" and "Three is deleted."Copy the code

Solution:

You give each element an ID, and you use the ID as the key

** Why not use index as key **

If you use index as the key, then when you delete the second term, index will go from 1, 23 to 1, 2 (since index is always continuous, so it can’t be 1, 3),

Vue will still think you deleted the third item. So you get the same bug as above.

So, never use index as a key.