vue.js data rendering render

render function is doing? ( Click to enter vue official description )

• Simply put, we use the template in vue HTML syntax set up a page, use the render function that we can use language to build DOM js

• Since vue is a virtual DOM, so to get the template when the template also translated into a function VNode, and build a DOM function render, vue on eliminating the translation process .

• When using the render function describes virtual DOM, vue provide a function that is a tool to build a virtual DOM need. Official website gave him a name createElement . There convention shorthand called h,

• vm have a method _c, this function is an alias

• Borrowed from https://www.cnblogs.com/weichen913/p/9676210.html

render function introduction

• That function render rendering function, it is a function, it is also a function of the parameters - that createElement
• createElement render function is a parameter, which is itself a function, and there are three parameters
• createElement function return value is vnode (ie: virtual node)

The underlying code explanation:

"" Code detailed explanation article ""

The most basic of code: the first argument, required

/*----------------------html----------------------------*/

    <div id="root">你好！</div>
    
/*----------------------js----------------------------*/
    new Vue({
        el:"#root",

        render(createElement){
            return createElement("h1","我是热爱学习人，因为学习使我快乐！");
            					//第一个值是 标签 ，第二个是你的内容
        }
    })

The results show:

you can see h1 has been rendered into it, but we found inside the div content is overwritten

---

render use and assembly in combination

/*----------------------html----------------------------*/

    <div id="root">你好！</div>
    
/*----------------------js----------------------------*/
    new Vue({
        el:"#root",
        components:{
            App:{
                template:`<div>我是一个名字为App的组件</div>`
            }
        },
        render(createElement){
            return createElement("App");
        },
    })

• Here's return createElement ( "App") must be wrapped in double quotes
• Otherwise, take out the definition App

    const App = {
        template:`<div>我是一个定义 在外部的App组件</div>`
    }

The results show: