The virtual DOM is a representation of real DOM structures and propertiesJavaScriptObject, which is used to compare the virtual DOM with the current real DOM, and then perform partial rendering to optimize performance. inVue.jsIn the virtual DOMJavaScriptThe object is a VNode.

Put it another way

A virtual DOM is an object that describes an HTML structure. 2. A virtual object that exists between a JS object and a real DOM tree. All dom tree nodes are generated according to the virtual DOM implementation. 4. Before the virtual DOM is converted to the real DOM tree, the diff algorithm is used to dynamically calculate and replace the labels that need to be changedCopy the code

Advantages of the virtual DOM

1. Can output different page display nodes for different terminal platforms, such as webpage, wechat applet and native application 2. Just change the render method to render different node tags during generationCopy the code

Why the virtual DOM?

Browsers consume a lot of resources when generating DOM trees, so the concept of virtual DOM can quickly generate real HTML nodes based on data after certain algorithm optimization. Now vUE and React are using virtual DOM

// var vnode = [{tag: 'ul', children: [{tag: 'li', lable: 'home'}, {tag: 'li', lable: 'list page ',}], calssName: 'nav',}]; // If you need to change the value of a node, you can directly modify the properties of the object // then call the render method to re-render the page // When rendering back to the node in the virtual DOM comparison only re-render the content of the data changed.Copy the code