Principle analysis and render function of VUE building virtual DOM

If you want to write HTML structure through VUE, the general official recommendation is the template attribute, which is simple and convenient to use; the specific code is as follows: Example 1:

Example 1: Use template to render ul list

var vm = new Vue({
    el:"#demo1",
    template:`
        <ul class = "bg" style = "fontSize:20px" abc = "yyy">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    `
});

However, in some practical application scenarios, you really need the full programming capabilities of JavaScript, which is the render function, which is closer to the compiler than the template. The specific example code is as follows: Example 2:

Example 2: Use the render function to render the ul list

var vm = new Vue({
    el:"#demo",
    render(createElement){
        var obj = createElement(
            "ul",
            {
                class: {
                    bg:true
                },
                style:{
                    fontSize:"50px"
                },
                attrs:{
                    abc:"yyy"
                },          
            },
            [
                createElement("li",1),
                createElement("li",2),
                createElement("li",3)
            ]
        );
        console.log( obj );
        return obj;
    }
});

Example 2 and Example 1 are two ways to implement virtual DOM in VUE, and the final browser rendering effect is the same;

Next, let's first understand the DOM tree and virtual DOM

The real DOM node tree of HTML is shown in the following figure

Vue's virtual DOM node tree construction process is shown in the following figure

Through this process, we can learn that the render function uses createElement to return a virtual DOM, thereby rendering the real DOM. Then you can monitor the changes in the "virtual DOM" through watcher and keep track; the information it contains will tell Vue what kind of nodes need to be rendered on the page and its child nodes. Through this process, Vue will automatically keep the page updated , the developer can efficiently update all DOM nodes,

Vue's virtual DOM generates a data diagram of DOM

A brief introduction to the render function

The next thing you need to be familiar with is how to generate templates in the createElement function. Here are the parameters that createElement accepts:

createElement(
    // 1.传入你想要生成最外层的根节点
    // {String | Object | Function}
    // 可以是一个 HTML 标签字符串，组件选项对象，或者
    // 解析上述任何一种的一个 async 异步函数，必要参数。
    'ul',

    // 2.一个包含DOM节点相关属性的数据对象
    // {Object}
    // 设置 生成DOM 中的属性。一般操作根节点，可选参数。
    {
        class: { 
            bg:true
        },
        style:{
            fontSize:"50px"
        },
        attrs:{
            abc:"yyy"
        },
        domProps:{
            /*innerHTML:"<li>我是里面的html结构</li>" */
        }   
    },

    // 3.生成子节点
    // {String | Array}
    // 子节点由 `createElement()` 构建而成，
    // 也可以使用字符串来生成“文本节点”。可选参数。
    [
        createElement("li",1),
        createElement("li",2),
        createElement("li",3)
    ]
)