vue中的render函数

---

1. 前言

在使用 vue-cli2 脚手架构建项目时，如果选择了Runtime + Compiler模式，那么在main.js文件中会有下面一段代码：

有关Runtime + Compiler的介绍可以看这篇博客：Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
     
  el: '#app',
  render: h => h(App)
})

---

2. 分析render函数

2.1 render 函数的作用

render 函数和 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。

2.2 render 函数讲解

render 函数即渲染函数，它是个函数，它的参数 createElement 也是个函数。

上边的代码中 render: h => h(App) ，这是 ES6的箭头函数的写法，可以把 h 当作 createElement 的别名。所以这段代码其实相当于：

render: function (createElement) {
     
    return createElement(App)
}

2.3 createElement 函数讲解

这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

createElement 函数的返回值是 VNode（即：虚拟节点）
有关对 VNode 的介绍可以看这篇博客：VNode简介

---

createElement 函数的3个参数

• 一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。类型：String | Object | Function。必需。
• 一个包含模板相关属性的数据对象，你可以在 template 中使用这些特性。类型：Object。可选。
• 子虚拟节点 (VNodes)，由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：String | Array。可选。

---

实现createElement函数

1、普通用法

// main.js文件
new Vue({
     
  el: '#app',
  render:function (createElement) {
     
    //1.普通用法
    // createElement(标签，{属性}，[内容])
    return createElement("h2",{
     class:"box"},['hello',createElement("button",["按钮"])])
  }
})

运行效果如图所示：

2、我们也可以自定义一个组件，传递给render函数

// ...
let Cpn = {
     
  template:`
{
      {message}}
`,
  data(){
     
    return {
     
      message:"我是组件"
    }
  }

}

new Vue({
     
  el: '#app',
  render:function (createElement) {
     
    //2.使用组件
    return createElement(Cpn)
  }
})

运行效果如图所示：

3、既然我们能够使用组件，那么App组件也是可以的

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
     
  el: '#app',
  render:function (createElement) {
     
    return createElement(App)
  }
})

效果如图所示：

---

3. 参考资料

关于Vue中 render: h => h(App) 的具体含义的理解

终于搞懂了vue 的 render 函数