vue中的render函数

文章目录

1. 前言
2. 分析render函数
- 2.1 render 函数的作用
- 2.2 render 函数讲解
- 2.3 createElement 函数讲解
- - createElement 函数的3个参数
  - 实现createElement函数
3. 参考资料

1. 前言

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

有关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 函数的作用

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，真的需要 JavaScript 的完全编程的能力。这时可以用渲染函数，它比模板更接近编译器。

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 节点之后，返回给的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。

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

createElement 函数的3个参数

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

实现createElement函数

1、普通用法

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

运行效果如图所示：
在这里插入图片描述
2、我们也可以自定义一个组件，传递给render函数

// ...
let Cpn = {
  template:`<h2>{{message}}</h2>`,
  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. 参考资料

render渲染函数 — 官网

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

终于搞懂了vue 的 render 函数

前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入

秒客网