This is the 15th day of my participation in the August Text Challenge.More challenges in August

What is the DOM?

DOM(Document Object Model) is a W3C standard for accessing HTML and XML documents.

The HTML DOM is the standard for how to get, modify, add, or delete HTML elements.

In the HTML DOM, everything is a node. The DOM is HTML that is treated as a tree of nodes.

Through the HTML DOM, all nodes in the tree are accessible through JavaScript. All HTML elements (nodes) can be modified, and nodes can be created or deleted.

The process of converting a VUE template into a view

  • Vue. Js converts the template template into the render function by compilation, which is executed to obtain a virtual node tree
  • When the Model is operated on, the Watcher object in the corresponding Dep is fired. The Watcher object calls the corresponding UPDATE to modify the view. This process involves comparing the old and new virtual nodes and then DOM manipulation to update the view based on the comparison results.

In a nutshell, the underlying implementation of Vue compiles templates into virtual DOM rendering functions. Combined with Vue’s built-in response system, Vue can intelligently calculate the minimum cost of re-rendering components in the event of a state change and apply it to DOM operations.

A brief understanding of the concepts in the diagram:

  • Render function: used to generate the virtual DOM.
  • Vnode virtual node: This can represent a real DOM node. A VNode can be rendered as a DOM node using the createElement method. Simply put, a VNode can be understood as a node description object, which describes how real DOM nodes should be created.
  • Patch (also known as patching algorithm) : The most core part of virtual DOM, it can render VNodes into real DOM. This process is to compare the differences between the old and new virtual nodes, and then find the nodes that need to be updated according to the comparison results. As can be seen from the meaning of the word, patch itself means patch and repair. Its actual function is to modify the existing DOM to realize the purpose of updating the view. Vue’s Virtual DOM Patching algorithm is based on the realization of **Snabbdom**, and has made a lot of adjustments and improvements on these basis.

Why do you need the virtual DOM?

The DOM element attributes are quite large, and the DOM is designed to be quite complex by browser standards. When we do frequent DOM updates, there are performance issues. Virtual DOM uses a native JS object to describe a DOM node, so it costs much less than creating a DOM.

The above statement is not serious, and the statement that the virtual DOM is faster than the real DOM is false, or not serious. So what’s the right thing to say? The virtual DOM algorithm operates the real DOM more efficiently than the direct operation of the real DOM. Virtual DOM and virtual DOM algorithm are two different concepts. Virtual DOM algorithm = virtual DOM + Diff algorithm

  • Have the advantage of cross-platform

    Because Virtual DOM relies on JavaScript objects, it does not rely on the real platform environment. So the virtual DOM is cross-platform.

  • It is slow to operate DOM directly, so putting DOM comparison operations in the JS layer can improve efficiency.

    The virtual DOM algorithm operates the real DOM more efficiently than the direct operation of the real DOM. Patching algorithm is used to calculate the nodes that really need to be updated, so as to minimize DOM operations and significantly improve efficiency.

    The Virtual DOM is essentially a cache between JS and DOM.

  • Improved rendering performance

    The advantage of Virtual DOM is not in a single operation, but in a large number of frequent data updates, the view can be reasonably and efficiently updated.

What is the virtual DOM?

The Virtual DOM is the Virtual DOM node. It simulates nodes in the DOM through JS objects and then renders them as real DOM nodes using a specific render method.

So it becomes code => Virtual DOM(a special JS object) => DOM

Virtual DOM is basically a tree based on JavaScript objects (vNodes), which are described by object attributes. In fact, it is just a layer of abstraction from the real DOM. Eventually, the tree can be mapped to the real world through a series of operations.

So, the virtual DOM is a special JS object that contains properties to define a virtual DOM, such as tag props children, etc.

Here is the definition of Vnode in Vue:

export class VNode { constructor ( tag? : string, data? : VNodeData, children? :? Array<VNode>, text? : string, elm? : Node, context? : Component, componentOptions? : VNodeComponentOptions, asyncFactory? : Function ) { this.tag = tag this.data = data this.children = children this.text = text this.elm = elm this.ns = undefined this.context = context this.functionalContext = undefined this.key = data && data.key this.componentOptions = componentOptions this.componentInstance = undefined this.parent = undefined this.raw = false this.isStatic = false this.isRootInsert = true this.isComment = false this.isCloned = false this.isOnce = false this.asyncFactory = asyncFactory this.asyncMeta = undefined this.isAsyncPlaceholder = false } }Copy the code

You can represent a DOM node with these attributes.

In VUE, the process of converting a template into a view is as follows: template → rendering function → virtual DOM tree → real DOM

The role of the virtual DOM

The virtual DOM does two things in vue.js:

  • Virtual nodes corresponding to real DOM nodes are provided
  • Compare the virtual node VNode with the old virtual node oldVnode and update the view

The ultimate goal of the virtual DOM is to render virtual nodes onto the view. However, if you overwrite the old node directly with the virtual node, there will be a lot of unnecessary DOM manipulation. For example, if there are many LI labels under one UL label and only one LI changes, the new UL will be used to replace the old UL, resulting in a waste of performance due to unnecessary DOM operations.

In order to avoid unnecessary DOM operations, the virtual DOM compares the virtual node with the old virtual node (oldVnode) used in the last rendering of the view during the mapping of the virtual node to the view to find the node that really needs to be updated for DOM operations, so as to avoid the operation of other DOM that need no change.

reference

Links: juejin. Cn/post / 684490…

Link: www.cnblogs.com/fundebug/p/…

Juejin. Cn/post / 698942…

Juejin. Cn/post / 699495…