Virtual DOM This concept I believe most people are not familiar with, provided it produces is the browser DOM is very "expensive", for a more intuitive feel, we can simply put a simple attribute of div elements are printed out, as shown:
You can see the real DOM elements is very large, because standard browser DOM put the design is very complicated. When we do DOM frequent updates, may have some performance issues.
The JS is to use a Virtual DOM objects native to describe a DOM node, so it is more than the cost to create a DOM is much smaller. In Vue.js in, Virtual DOM is used VNode to describe such a Class, which is defined in src/core/vdom/vnode.js the.
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 } } Vue.js can be seen in the Virtual DOM definition is slightly more complex because it includes many here Vue.js features. Here Do not be scared of these vast number of properties actually Vue.js in Virtual DOM is borrowed from an open source library snabbdom achieve, and then added some Vue.js special things. I suggest that you may wish to learn more by reading the source code of the library before Virtual DOM Vue.js, because it is more simple and pure.
to sum up
In fact VNode is an abstract description of real DOM, its core definition is nothing more than a few key attributes, tag name, data, child nodes, keys, etc., all other attributes are used to achieve the flexibility and extend VNode Some of the special feature. Since only used to map the real VNode DOM rendering, DOM operations need not include a method, so it is very simple and lightweight.
Virtual DOM In addition to defining its data structure is mapped to the real DOM actually go through the VNode create, diff, patch and other processes. Then Vue.js in, VNode create through the previously mentioned createElement creation method, we are going to implement this part of the analysis.
----------------- switched network vue Source Mu class parses content of the video tutorial -----------------