CSDN fan account: down and out front online fry powder ZZZ, irregularly send [standard factory will meet questions], [will commonly used algorithm], [will be high concurrency solution], [optimization] and other special columns for everyone to study and watch

  1. What is the virtual DOM?
  2. Why do you need the virtual DOM?
  3. How does the virtual DOM translate into the real DOM?
  4. The relationship between templates and the virtual DOM?

Each VUE component will have a render function. Vue will analyze the AST abstract syntax tree according to the template string and then get the analysis result to generate the render function. The render function is responsible for generating the virtual DOM tree. Virtual DOM can be simply understood as vue simulates a DOM tree roughly the same as the browser DOM tree, which is called the virtual DOM tree, and the virtual DOM is a node in the tree. As we all know, a node in the DOM tree is a DOM element. A virtual DOM tree is the same. A virtual DOM node corresponds to a real DOM element, so why do we need a virtual DOM tree? Because we all know one vUE feature: In response, vUE will have two DOM trees at the bottom, one is the new DOM tree after the change, and one is the old DOM tree after the change. Vue will use the Patch algorithm to compare the two DOM trees efficiently, and then find the changed virtual DOM subtree, because only a small piece of things may be changed. Therefore, vUE only needs to change the corresponding small piece of the real DOM, without affecting the whole DOM tree as we do directly with the real DOM. We all know that the performance cost of rearrangement is very high, so this is why the page update effect of VUE is high. This is why Vue has to create a virtual DOM tree many times at one go. In fact, it is very similar to the idea of our dynamic programming algorithm, space for time, virtual DOM tree is space, responsive speed is time, but space is also where dynamic programming is slow, and vUE is slow. Vue is actually slower than direct generation of the real DOM. However, due to the later advantages of fast time, we can ignore the disadvantages of its space. So how does the virtual DOM generate the real DOM? In fact, I mentioned at the beginning that Vue first converts the template string we wrote into a string and then conducts AST abstract syntax tree analysis through the compile module in Vue, and then generates the render function to generate the virtual DOM tree after obtaining the analysis results. The virtual DOM tree generates the real DOM of the corresponding position. Finally, reactive mode is adopted to improve the page rendering efficiency. Finally, what is the relationship between template and real DOM? Templates are just more intuitive and more close to the vue in order to facilitate our habit to write components, really is on the page or our real dom, template have the effect of convenient intuitive, here would like to add two points, if we use the traditional way of introducing the vue template will be compiled in the component runtime, At this point we should note that AST analysis is very slow and most of the performance of the entire VUE is consumed by it, so it is obviously not a wise choice to use the traditional way of referencing vUE, so we usually use vue-CLI to import vUE and write VUE. Vue-cli uses Webpack as a packaging tool at the bottom. We all know that Webpack will have an AST abstract syntax tree analysis process during the packaging process. So our template string can be parsed through the WebPack AST in the same way as cSSLoader or LessLoader and quickly render is generated. This AST is called a precompiled AST and its AST compilation is not added to the package result. So we can run the packaged code faster than we can run it at runtime. So that’s the difference between importing in the traditional way and importing in the VUe-CLI way. So that’s all about the virtual DOM, thank you