vue.js 的数据渲染 render

render 函数是干嘛的？ （点击进入vue官方介绍）

• 简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM

• 因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

• 当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,

• vm中有一个方法_c,也是这个函数的别名

• 借鉴自https://www.cnblogs.com/weichen913/p/9676210.html

render 函数介绍

• render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement
• createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数
• createElement 函数的返回值是 VNode（即：虚拟节点）

基础代码解释：

》》代码详细解释文章《《

最基础代码：第一个参数，必填

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

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

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

结果展示：

可以看到 h1 已经渲染进去了，不过我们发现 div 里面的内容被覆盖掉了

---

render和组件结合使用

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

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

• 这里的 return createElement(“App”) 必须用双引号包裹
• 否则要把 App 拿出来定义

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

结果展示：