Summary of the understanding of virtual DOM in Vue

It is essentially a common js object used to describe the view interface structure.

In the callback of mouted, you can output _vnode,

From the figure, we can see that _vnode has the following main attributes:

• tag: the tag name of the component,
• data: component properties,
• Children: child tags of the component
• parent: parent element

Render function:

Function: create a virtual dom,

Each component has a virtual DOM, and the virtual DOM is created by the render function;

The purpose of using a virtual DOM tree: to improve rendering efficiency

In Vue, the render function is called when the view is rendered. This rendering happens not only when the component is created, but also when the data that the view depends on is updated;

Due to the creation and update of the real DOM. Operations such as insertion bring a lot of performance consumption, thereby reducing rendering efficiency, so a virtual DOM tree is used instead of the real DOM.

How to convert virtual dom into real dom

The first rendering of the component instance: Generate a virtual DOM tree, create a real DOM based on the virtual DOM tree, and mount the real DOM to the appropriate position of the page. At this time, each virtual DOM corresponds to a real DOM;

Note: In the virtual DOM, all elm attributes are real DOM, that is, the generated virtual DOM also creates the real DOM. That is to say, for the first rendering, Vue is less efficient than simply creating DOM elements. The efficiency of Vue is reflected in the comparison of virtual DOM with responsive data changes.

When the data that the component depends on is affected by responsive data: re-call the render function to create a virtual DOM tree, compare the new and old virtual DOM trees, Vue will find the minimum update amount, then update the necessary virtual DOM nodes, and finally modify the corresponding real DOM. This ensures minimal changes to the real DOM.

The number of real DOM attributes is much larger than that of virtual DOM attributes, and any addition or deletion of the real DOM will cause reflow and redraw problems. This is very performance intensive.

Note: Comparison of the time consumption of creating real DOM and ordinary objects

It can be seen that creating a DOM object takes more than 20 times as long as creating an ordinary object.

The relationship between template and virtual DOM

There is a compile template in the Vue framework, which is mainly responsible for converting the template into a render function, and the render function will get the virtual DOM after calling it.

The compilation process is divided into two steps

1. Convert the template string into AST (Abstract Syntax Tree, using js tree structure to describe the original code. The following figure shows the structure through AST online conversion.

2. Convert AST into render function

Runtime compilation and template precompilation

When the traditional import method is used, the compilation occurs when the component is first loaded, which is called runtime compilation.

If by default in vue-cli, compilation occurs at packaging time (npm run build / serve), it becomes template precompilation.

Compilation is an extremely performance-intensive operation. Precompilation can effectively improve runtime performance. Moreover, since compilation is no longer required during runtime, vue-cli will exclude the compile module in vue when packaging to reduce the packaging size. The existence of templates is just to make it easier for developers to write code.

Knowledge point expansion:

The role of virtual dom

The current mainstream frameworks are all frameworks for declarative DOM operations. We only need to describe the mapping relationship between the state and the DOM. The framework will help us convert the state to the view (the real DOM).

The crudest approach is to render the state into a view, and update the entire view every time the state is updated.

The performance of this approach can be imagined. A better idea is: when the state changes, only the DOM nodes related to the state are updated. Virtual DOM is just one way to implement this idea.

Specific steps:

State -> Real dom (Initially)

State -> Virtual DOM -> Real DOM (using virtual DOM)

When the state changes, a new virtual DOM is generated, the previous one is compared with this one, the parts that need to be updated are found, and the real DOM is updated.

Virtual DOM in Vue

The real dom is composed of nodes (Node), and the virtual dom is composed of virtual nodes (vNode).

Virtual DOM mainly does two things in Vue:

Provides virtual nodes (vNode) corresponding to real nodes (Node)

Compare the new virtual node with the old virtual node, find the differences, and then update the view

This concludes this article about the summary of knowledge points on understanding virtual DOM in Vue. For more information about understanding virtual DOM in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!