Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "what are the virtual dom knowledge points in vue", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the virtual dom knowledge points in vue" can help you solve your doubts.

I. brief introduction

Virtual dom is the product of the development of the times. Imperative operation dom:

Simple and easy to use

The state in the program is difficult to manage, and the logic in the code is confusing.

Now the three major frameworks are all declarative operation DOM. By describing the mapping between the state and the DOM, you can render the state into a view. The state can be any type in JS. The process of taking status as input and generating DOM output to be displayed on the page is called rendering. Usually when the program is running, the state will change constantly. When the state changes, you need to re-render. How do I determine what changes have taken place in the state and where the DOM needs to be updated? The simplest and most rude solution: delete all the DOM, regenerate a copy of the DOM using the status, and output it to the page for display. But accessing dom is very expensive, which can lead to a considerable waste of performance.

The solution to virtual DOM is to generate a virtual node tree from the state, and then use the virtual node tree for rendering. Before rendering, the new and old virtual DOM are compared and only different parts are rendered. Virtual DOM is one of many solutions that map states to views.

2. Why did VUE introduce virtual DOM?

To some extent, vue knows which state has changed and which nodes have used it, so that the view can be updated with finer-grained bindings. The price is that if the granularity is too fine, there will be a lot of watcher observing certain states at the same time, some memory overhead, and some overhead that depends on tracing. Vue2.0 adopts a medium-grained solution, state detection is only refined to a component, and the component renders the view through virtual DOM, which can greatly reduce the number of dependencies and watcher. Vue describes the mapping between the state and the view through a template. It first compiles the template into a rendering function, then executes the rendering function to generate a virtual node, and updates the view with the virtual node.

The role of virtual DOM in vue:

Provide virtual nodes and compare the new and old vnode, and perform DOM operations to update the view according to the comparison results.

III. Vnode

The VNode class can instantiate different types of vnode instances, and different types of vnode instances represent different types of DOM elements. Vnode can be understood as a node description object, describing how to create a real DOM.

Type of 1.vnode

Comment node: only two valid attributes: the isComment attribute and the text attribute

Text node: only the text attribute

Element node: tag,data (data of node: such as attrs, class, style, etc.), children,context (vue instance of current component)

Component node: unique attributes are componentOptions (option parameter for component node), componentInstance (component instance)

Functional components: similar to component nodes, with unique properties functionalContext and functionalOptions

Clone node: copy the attributes of the existing node to the new node. The only difference from the cloned node is the isCloned attribute. The isCloned of the cloned node is true. The function is to optimize static nodes and slot nodes.

4. The core of virtual dom-- patch

You can render the vnode into a real DOM, and the actual effect is to calculate the nodes that really need to be updated, modify the existing DOM to achieve the purpose of updating the view, minimize DOM operations, and significantly improve performance. In essence, the operation cost of js is used to replace the execution cost of DOM operation. The operation speed of js is much faster than that of DOM, so it is very cost-effective.

The process of 1.patch

Is to add, delete and modify nodes based on the new vnode.

New node

OldVnode does not exist but exists in vnode. It usually occurs in the first rendering.

Vnode and oldVnode are not the same node at all, vnode is a new node, and oldVnode is an abandoned node.

Delete nod

Nodes exist only in oldVnode.

The replacement process is to insert the newly created DOM node next to the old node, and then delete the old node.

Update Node

What the addition and deletion nodes have in common is that the two virtual nodes are completely different. The new and old nodes are the same text node, which needs to be compared in more detail.

Static node

Static node: once rendered to the page, it will not change. If there are two new and old virtual nodes, the static node skips the update node directly.

The new virtual node has text attributes

The new virtual node has a text attribute and is different from the old one, so the setTextContent method (node.textContent method in the browser environment) is called directly to change the content of the DOM node in the view to the text saved by the text attribute of the virtual node.

The new virtual node has no text attribute

The new virtual node has children:

The old virtual node also has a children attribute, which makes a more detailed comparison and update of the children of the new and old virtual nodes (add, delete, change).

The old virtual node does not have a children attribute, indicating that the old virtual node is either an empty label or a text node with text. If it is a text node, empty the text to make it an empty tag, and then create the children in the new virtual node (vnode) one by one into a real DOM element node and insert it under the DOM node in the view.

The new virtual node has no children:

No text and no children, which means it's an empty node. Delete the old virtual node to an empty label.

Fifth, update the optimization strategy of child nodes

Double-end comparison. You only need to try to use two nodes in the same location to compare whether it is the same node: if it happens to be the same node, you can directly enter the operation of updating the node; if the attempt fails, use the loop to find the node. Doing so greatly avoids cycling the oldChildren to find nodes, thus greatly improving the execution speed.

The oldChildren loop is completed first. If there are any remaining nodes in the newChildren, these nodes need to be added. Just insert these nodes into the DOM.

After the newChildren loop is completed, if there are any remaining nodes in the oldChildren, it means that the remaining nodes in the oldChildren are abandoned nodes and should be deleted. You don't need a circular comparison to know that you need to remove these nodes from the DOM.

After reading this, the article "what are the virtual dom knowledge points in vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.