In the interview process, you may also be asked about your understanding of the virtual DOM. This kind of interview question is relatively broad, and the interviewer wants to know how much you know. Since it is understanding, it can only be known without hesitation, try to organize the language to say more, so as to appear relatively high professional quality, next, I will talk about their own understanding, remember not to recite, must understand, use their own language to describe it.

We can answer it from the following four aspects:

🌟 What is the virtual DOM

The virtual DOM is essentially a plain JS object that describes what interface structure should be on a view, and does not generate an interface. In the Mounted phase of the lifecycle, print this._vnode as follows:

It describes what a tag is, what attributes it has, what child elements it has, and so on. It describes what should be on a page in the form of a normal JS object, but it doesn’t generate an interface.

In VUE, each component has a render function, and each render function returns a virtual DOM number, which means that each component has a virtual DOM tree.

🌼 Why do you need the virtual DOM

This is mainly determined by the VUE framework structure, in which the render view calls the Render function, not only when the component is created, but also when the dependent data is updated. If the real DOM is directly used in rendering, the creation, update, insertion and other operations of the real DOM will bring a lot of performance consumption, thus greatly reducing the rendering efficiency.

Example: Comparing the creation of a JS object with the creation of a real DOM object

<script>
      var times = 10000000;// 10 million times
      / / js object
      console.time(`js object`);
      for (var i = 0; i < times; i++) {
        var obj = {};
      }
      console.timeEnd("js object");
      // Real DOM objects
      console.time(`dom object`);
      for (var i = 0; i < times; i++) {
        var obj = document.createElement("div");
      }
      console.timeEnd("dom object");
</script>
Copy the code

Running results:

As a result, the JS object took 150ms, while the actual DOM took nearly 7s, not counting the redrawing and rearrangement time caused by inserting it into the page, which is pretty scary!

Therefore, vUE uses virtual DOM instead of real DOM in rendering, mainly to solve the problem of rendering efficiency. The virtual DOM doesn’t work either, so how will the page display? Can’t be no word day book! Which brings us to the third aspect

🌴 How is the virtual DOM converted into the real DOM

In a component instance be rendered for the first time, it will generate virtual dom tree, and then according to the virtual create real dom dom tree, and finally the real dom mounted to the page in the right position, so to create real dom this step is little not, can only say that try to create less, if only need to render a page, The subsequent data changes do not re-render the page, so the efficiency of vUE is actually lower than the efficiency of direct DOM manipulation, because it has one more step than direct DOM manipulation: creating the virtual DOM. The first vUE rendering is not efficient, but the rest is different.

If a component is affected by a reactive data change and needs to be re-rendered, it will still re-call the render function to create a new virtual DOM tree, which will be compared with the new virtual DOM tree (newVnode) and the old virtual DOM tree (oldVnode). By comparison, vUE will find the minimum number of updates. The necessary virtual DOM nodes are then updated, and finally, these updated virtual nodes modify their corresponding real DOM. This ensures minimal manipulation of the real DOM.

In fact, an algorithm called Patch is used in the comparison process, which can determine which nodes have changed, so as to update only the virtual DOM nodes that have changed. I will write a special article about patch to talk about my own views.

👋 The relationship between templates and virtual DOM

The Compile module in the Vue framework is responsible for converting the template into the Render function, which is called to produce the virtual DOM.

The compilation process is divided into two steps:

  1. Convert template strings to AST(Abstract Syntax Tree)
  2. Convert AST to render function

  • If you use the traditional import method (using the script tag to import vue.js), the compile time occurs when the component is first loaded and is called runtime compilation.

  • If the vuE-CLI default configuration is used, compilation occurs at typing time and is called template precompilation.

Compilation is a very performance-consuming operation. Precompilation can effectively improve the performance of the runtime. In addition, since compilation is no longer needed in the runtime, vuE-CLI will exclude the compile module in vUE during packaging, which can reduce the packaging volume.

When vue finally runs, it needs the render function, not the template. Note here that Vue does not know the template, the template is needed for vuE-CLI precompilation. It will eventually compile the template into a Render function for VUE to run properly. So all the syntax in the template doesn’t exist in the virtual DOM, it becomes the configuration of the virtual DOM.

😊 well, that’s all I have to share. If you have any other understanding of virtual DOM, you can discuss duck ~ in the comments section

Be sure to like 👍 and support 😘