About Vue virtual dom problem

1. What is virtual dom?

Virtual DOM is essentially a common JS object used to describe the interface structure of the view.

In Vue, each component has a render function.

If there is no render, look for template. If there is no template, look for el. If there is el, el.outHTML will be used as template, and then this string will be compiled into a render function.
If there is a template, I won’t look further. The same goes for render.

Each render function returns a virtual DOM tree, which means that each component corresponds to a virtual DOM tree.
In other words, the purpose of render is to create a virtual DOM, what exactly does this component display.
console.log('render'); ↓

Off topic: console.dir() can display all the properties and methods of an object.

If there is no return, there is no real DOM in the page.
Add return↓

The h function name is custom, the h function structure is h(label, {own attributes}, [sub-element])
The sub-element continues to be created using the h function. Because there are other attributes, we create another sub-element in [ ].

The h function makes a judgment. If it is not an object, it is a text node. ↑ It is considered that the configuration in the middle is omitted

Rendered on the page.
console.log(vnode);

h1 child element↓

Corresponding to real nodes through .elm

h('h1','{ {title}}') is definitely not acceptable, it must be h('h1',this.title)

2. Why do we need virtual dom?

In Vue, rendering a view calls the render function. This rendering occurs not only when the component is created, but also when the data that the view depends on is updated. If the real DOM is used directly during rendering, the creation, update, and insertion of the real DOM will cause a lot of performance loss, which will greatly reduce the rendering efficiency.
Therefore, when rendering, Vue uses virtual DOM instead of real DOM, mainly to solve the problem of rendering efficiency.

There is no problem in generating the real DOM when loading for the first time, because it is unavoidable and necessary to generate the real DOM.
The render function is generated not only once, but also every time the data changes.
But if createElement is used in render, a new DOM element will be generated every time, which is too expensive.

3. How is the virtual DOM converted to the real DOM

When a component instance is rendered for the first time, it first generates a virtual DOM tree, traverses the nodes depth-first, sets Attribute, and then creates a real DOM based on the virtual DOM tree. It mounts the real DOM to the appropriate position in the page and directly replaces div#app. At this point, each virtual DOM will correspond to a real DOM.

It is not equal to, because div#app is directly replaced

If a component is affected by responsive data changes and needs to be re-rendered, it will still call the render function again to create a new virtual DOM tree, compare the new tree with the old tree, and through comparison, Vue will find the minimum update amount, and then update the necessary real DOM nodes, thus ensuring the minimum change to the real DOM.

Use the diff algorithm to check whether the two virtual DOMs are different, and then modify the real DOM of the corresponding nodes to achieve the desired effect, ensuring minimal changes and improving efficiency.

4. The relationship between template and virtual DOM

Virtual DOM built by scaffolding

There is a compile module 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 (both babel and webpack are created in this way):

Convert the template string into an AST (abstract syntax tree, which describes our stuff in a tree structure) and convert the AST into a render function

AST↓, let me mention that AST is built with a stack

If the traditional import method (src) is used, the compilation time occurs when the component is loaded for the first time, which is called runtime compilation. Again, step 1 is very time consuming.
If it is in the default configuration of vue-cli, compilation occurs during packaging, which is called 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.

If the template is not written above

It will report an error, but you can configure it in vue.config.js

module.export={runtimeCompiler:true}

Not recommended, as it will add compiled content and make the content larger. (I’d like to mention esbuild and vite to speed up packaging? I haven’t used them.)

The existence of templates is just to make it easier for developers to write interface codes.
When Vue finally runs, what is needed is the render function, not the template. Therefore, the various syntaxes in the template do not exist in the virtual DOM, and they will all become the configuration of the virtual DOM.

Equivalent to

Example: Automatically generate a directory

Now you need to make a component that can automatically generate a directory based on the content in its slot.

This is the end of this article about Vue virtual dom issues. For more related Vue virtual dom content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future.