The Virtual DOM is not a DOM; it is a lightweight JavaScript object that performs Diff operations when state changes, updating only the DOM that actually needs to be replaced.

Because Virtual DOM only computes based on JavaScript, it has higher performance and lower overhead than DOM.

The Virtual DOM in vue.js 2 is implemented through vNodes, and each DOM element or component corresponds to a VNode object:

var VNode = function VNode (
        tag,
        data,
        children,
        text,
        elm,
        context,
        componentOptions
    ) {
        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;
    };
Copy the code
parameter type instructions
tag string Name of the current node label.
data VNodeData Current node data object.
children Vnode[] An array of children of the current node.
text string Text of the current node.
elm Node The DOM node corresponding to the current node.
ns string Current node namespace.
context Vue Compile scope.
functionalContext – Functional component scope.
key A string or number Key of a node.
componentOptions VnodeCopmonentOptions The option of the component.
componentInstance Vue The component instance corresponding to the current node.
parent VNode The parent of the current node.
raw boolean Whether it is native HTML, innerHTML is true, and textContent is false.
isStatic boolean Whether the node is static.
isRootInsert boolean Whether to be inserted as the root node.
isComment boolean Whether it is a comment node.
isCloned boolean Whether the node is a clone node.
isOnce boolean Whether the V-once command is available.

Vnodes are classified into the following types:

type instructions
TextVNode Text node.
ElementVNode Element node.
ComponentVNode Component node.
EmptyVNode Comment node.
CloneVNode The difference between any of the above types of copy nodes is that their isverification is true.