1. WHAT-Virtual DOM

Real DOM elements are very large tree data structures, and the Virtual DOM is essentially a lightweight JavaScript data format that represents what the real DOM looks like at a given point in time. A Virtual DOM is simply an object that has a label indicating that it is a div, a data object that contains possible attributes, and a sublist that represents an array of more Virtual nodes. This creates a virtual tree of nodes for the virtual DOM.

  • Real DOM

You can see, reallyDOMElements are very large when we do them frequentlyDOMWhen the update operation is performed, certain performance problems will occur.

  • Virtual DOM 
      {
    "tag": "h1",
    "children": [
      {
        "text": ""
      }
    ],
    ......
  }
Copy the code

    Virtual DOMJust use a nativeJSObject to describe aDOMNode. inVueIs throughVNodethisClassClass to describe define virtualDOM.

    export default class VNode { tag: string | void; data: VNodeData | void; children: ? Array<VNode>; text: string | void; elm: Node | void; ns: string | void; context: Component | void; // rendered in this component's scope key: string | number | void; componentOptions: VNodeComponentOptions | void; componentInstance: Component | void; // component instance parent: VNode | void; // component placeholder node // strictly internal raw: boolean; // contains raw HTML? (server only) isStatic: boolean; // hoisted static node isRootInsert: boolean; // necessary for enter transition check isComment: boolean; // empty comment placeholder? isCloned: boolean; // is a cloned node? isOnce: boolean; // is a v-once node? asyncFactory: Function | void; // async component factory function asyncMeta: Object | void; isAsyncPlaceholder: boolean; ssrContext: Object | void; fnContext: Component | void; // real context vm for functional nodes fnOptions: ? ComponentOptions; // for SSR caching fnScopeId: ? string; // functional scope id support 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.fnContext = undefined this.fnOptions = undefined this.fnScopeId = 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 } // DEPRECATED: alias for componentInstance for backwards compat. /* istanbul ignore next */ get child (): Component | void { return this.componentInstance } }Copy the code

    There are some of themVueFeatures.

2. WHY-Virtual DOM

The virtual DOM is, of course, for performance reasons, assuming we have a list of 1000 elements. Creating 1000 JavaScript objects is quick, but creating 1000 actual DIV nodes takes too much performance. VNode is an abstract representation of the real DOM. Its core definition contains several key attributes, such as tag name, data, child nodes, and key values. Other attributes are used to extend the flexibility of VNode and implement special features. Since VNode is only used for rendering that maps to the real DOM and does not need to include methods to manipulate the DOM, it is very lightweight and simple.