Use of VNode in Vue.js

What is VNode

There is a VNode class in vue.js, which can be used to instantiate different types of vnode instances, and different types of vnode instances each represent different types of DOM elements.

For example, DOM elements include element nodes, text nodes, comment nodes, etc., and vnode instances also correspond to element nodes, text nodes, and comment nodes.

The VNode class code is as follows:

 export default class VNode {
    constructor(tag, data, children, text, elm, context, componentOptions, asyncFactory) {
       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.functionalOptions = undefined
        this.functionalScopeId = 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
    }
    get child() {
        return this.componentInstance
    }
 }
 

As can be seen from the above code, vnode is just a name. In essence, it is an ordinary JavaScript object, which is an object instantiated from the VNode class. If we use this JavaScript object to describe a real DOM element, then all the attributes on the DOM element have corresponding attributes on the VNode object.

In simple terms, vnode can be understood as a node description object, which describes how to create a real DOM node.
For example, tag represents the name of an element node, text represents the text of a text node, children represents child nodes, and so on. Vnode represents a real DOM element. All real DOM nodes are created using vnode and inserted into the page.

VNode creates DOM and inserts into view

The figure shows the process of using vnode to create a real DOM and render it to the view. It can be seen that vnode and view are one-to-one corresponding. We can think of vnode as a JavaScript object version of a DOM element.

The process of rendering a view is to first create a vnode, then use the vnode to generate a real DOM element, and finally insert it into the page rendering view.

The role of VNode

Since each time a view is rendered, a vnode is created first, and then the real DOM created by it is inserted into the page, the vnode created when the view was rendered last time can be cached first. Then, whenever the view needs to be re-rendered, the newly created vnode is compared with the last cached vnode to see what differences there are between them, find out the differences and modify the real DOM based on them.

Vue.js currently uses a medium-granularity state detection strategy. When the state changes, it is only notified to the component level, and then the virtual DOM is used within the component to render the view.

As shown in the figure below, when a state changes, only the components that use this state are notified. That is, as long as one of the many states used by a component changes, the entire component must be re-rendered.

If only one node of a component has changed, re-rendering all the nodes of the entire component will obviously cause a huge performance waste. Therefore, it is important to wake up the vnode cache, compare the last cache with the currently created vnode, and only update the nodes that are different. This is also the most important function of vnode.

Types of VNode

There are many different types of vnodes, including the following:

Comment Node

1. Text Node
2. Element Node
3. Component Node
4. Function Node
5. Clone Node

As mentioned earlier, vnode is a JavaScript object. Different types of vnodes actually have different properties, or more precisely, different effective properties. Because when you create a vnode using the VNode class and set attributes for the instance through parameters, invalid attributes will be set to undefined or false by default. For invalid attributes on vnode, just ignore them.

1. Comment Node

Since the process of creating a comment node is very simple, we will directly introduce its properties through code:

    export const createEmptyVNode = text => {
        const node = new VNode()
        node.text = text;
        node.isComment = true;
        return node
    }

A comment node has only two valid attributes: text and isComment. All other properties default to undefined or false.

For example, a real comment node has a corresponding vnode that looks like this:

// <!-- Comment node-->
{
    text: "Comment Node",
    isComment: true
}

2. Text nodes

The process of creating a text node is also very simple, the code is as follows:

    export function createTextVNode(val) {
        return new VNode(undefined, undefined, undefined, String(val))
    }

When a text type vnode is created, it has only one text attribute:

{
    text: "text node"
}
 

3. Clone Node

Cloning a node is to assign the properties of an existing node to a new node, so that the properties of the newly created node and the cloned node are consistent, thus achieving a cloning effect. Its function is to optimize static nodes and slot nodes.

Taking static nodes as an example, when a state in a component changes, the current component will re-render the view through the virtual DOM. Since the content of static nodes does not change, except for the first rendering, which requires executing the rendering function to obtain the vnode, subsequent updates do not need to execute the rendering function to regenerate the vnode.

Therefore, the vnode will be cloned using the method of creating a clone node, and the clone node will be used for rendering. In this way, there is no need to execute the rendering function to generate a new vnode for the static node, thereby improving performance to a certain extent.

The code to create a cloned node is as follows:

export function cloneVNode(vnode, deep) {
        const cloned = new VNode(vnode.tag, vnode.data, vnode.children, vnode.text, vnode.elm, vnode.context, vnode.componentOptions, vnode.asyncFactory)
        cloned.ns = vnode.ns
        cloned.isStatic = vnode.isStatic
        cloned.key = vnode.key
        cloned.isComment = vnode.isComment
        cloned.isCloned = true
        if (deep && vnode.children) {
            cloned.children = cloneVNodes(vnode.children)
        }
        return cloned
    }

To clone an existing node, you only need to assign all the properties of the existing node to the new node.
The difference between the displacement of the cloned node and the cloned node is the isCloned property, which is true for the cloned node and false for the original node being cloned.

4. Element Node

Element nodes usually have the following four valid attributes.

• Tag: Tag is the name of a node, such as p, ul, li and div.
• data: This attribute contains some data on the node, such as attrs, class, and style.
• children: List of child nodes of the current node.
• context: It is the Vue.js instance of the current component

A real element node, the corresponding vnode is as follows:

    // <p><span>Hello</span><span>World</span></p>
    {
        children: [VNode, VNode],
        context: {...},
        data: {...},
        tag: "p",
        ...
    }
 

5. Component Node

Component nodes are similar to element nodes, and have the following two unique properties.

componentOptions: Option parameters of the component node, which includes information such as propsData, tag, and children
componentInstance: An instance of a component, that is, an instance of Vue.js. In fact, in Vue.js, each component has a Vue.js instance.

A component node, the corresponding vnode is as follows:

    // <child></child>
    {
        componentInstance: {...},
        componentOptions: {...},
        context: {...},
        data: {...},
        tag: "vue-component-1-child",
        ...    
    }

6. Functional Node

Functional nodes are similar to component nodes. They have two unique properties: functionalContext and functionalOptions.
Typically, a function node's vnode looks like this:

     {
        functionalContext: {...},
        functionalOptions: {...},
        context: {...},
        data: {...},
        tag: "div"
      }

Summarize

VNode is a class that can produce different types of vnode instances. Different types of instances represent different types of real DOM.

Since Vue.js uses virtual DOM to update the view of components, when the attributes change, the entire component must be re-rendered, but not all DOM nodes in the component need to be updated. Therefore, caching the vnode and comparing the newly generated vnode with the cached vnode, and only performing DOM operations on the parts that need to be updated can greatly improve performance.

There are many types of vnodes, which are essentially objects instantiated from Vnodes. The only difference between them is the properties.

This is the end of this article about the use of VNode in Vue.js. For more relevant VNode usage content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!