Javascript Virtual DOM Detailed Explanation

What is virtual dom?

Virtual DOM is essentially a common JS object (the content of this object is printed in mounted._vnode), which is used to describe the interface structure of the view.

In Vue, each component has a render function, and each render function returns a virtual DOM tree, which means that each component corresponds to a virtual DOM tree.

vnode is a common JS object used to describe what should be on the interface, such as:

var vnode = {
  tag: "h1",
  children: [
    { tag: undefined, text: "The first vue application: Hello World"}
  ]
}

The above object describes:

There is a node with the tag name h1, which has a child node, which is a text with the content "First Vue application: Hello World"

Why do we need virtual dom?

In Vue, rendering the 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.

Compare the efficiency of creating js objects and real dom objects:

result:

Creating a real DOM comes with creating many attributes

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, then creates a real DOM based on the virtual DOM tree, and mounts the real DOM to the appropriate location in the page. At this time, each virtual DOM corresponds to a real DOM. If the page is refreshed only once and there will be no subsequent data updates, using a virtual DOM is less efficient than directly displaying the real DOM.

If a component is affected by responsive data changes and needs to be re-rendered, it will still call the render function again, create a new virtual DOM tree, compare the new tree with the old tree, find the difference through comparison, and then update only the virtual DOM nodes of the different parts. Finally, these updated virtual nodes will modify their corresponding real DOM

In this way, the actual DOM is minimally modified.

The relationship between template and virtual DOM

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:

1. Convert the template string into AST (Abstract Syntax Tree: Use js tree structure to describe our original code; online tool: https://astexplorer.net/)

2. Convert AST to render function

The vue template is not a real DOM, it will be compiled into a virtual DOM

<div id="app">
  <h1>The first Vue application: {{title}}</h1>
  <p>Author: {{author}}</p>
</div>

The above template will be compiled into a virtual DOM similar to the following structure

{
  tag: "div",
  children: [
    { tag: "h1", children: [ { text: "The first Vue application: Hello World" } ] },
    { tag: "p", children: [ { text: "Author: Yuan" } ] }
  ]
}

If you use the traditional import method ( script src="...vue.js "), the compilation time occurs when the component is first loaded, which is called runtime compilation.

If it is in the default configuration of vue-cli , compilation occurs npm run build build). After packaging, there is no template but only render function, 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.

Whether the compile module needs to be included when packaging is controlled by runtimeCompiler: true in vue.config.js. The default value is false, which means it is not included. It is not recommended to change this configuration

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.

In vue-cli, if both template and render exist, due to the packaging process, the template pre-compilation will generate render to overwrite the original render function.

In Vue, if both template and render exist at the same time, render must prevail.

The virtual DOM tree will eventually be generated into a real DOM tree

Vue generates a vnode tree through the following logic:

Note: The virtual node tree must be single-rooted

injection

Vue will inject the following configuration into the Vue instance:

• data : data related to the interface
• computed : data calculated from existing data, which will be explained in detail in the future
• methods : methods

Members of the Vue instance can be used in the template

To prevent name conflicts. Because the data in data will be proxied to vue, if the data name we write conflicts with the attributes in vue, then the attributes inside vue will be overwritten, so vue will add or before the name of its own attribute member. If it is added with or _, if it is added with or , if it is added with , it means that we can use it. If it is added with _, it is a method or attribute used by vue itself, and we don't need to call it.

Mount

Placing the generated real DOM tree at a certain element position is called mounting

Mounting method:

1. Configure through el:"css selector"

2. Configure through vue instance.$mount("css selector")

Complete Process

• An instance is created: new Vue()
• Only after the injection is completed will there be responsiveness and data changes can be monitored
• Compile and generate a virtual DOM tree: first find the render function, if there is no render function, find a template to generate it, and finally run render to generate a virtual DOM tree
• Mounting completed: The page displays
  

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!