文章目录
1. 前言
在使用 vue-cli2 脚手架构建项目时，如果选择了Runtime-only模式，那么在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 函数的作用
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 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。
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",["按钮"])]) } }) // ... let Cpn = {
template:`{
{message}}
`, data(){
return {
message:"我是组件" } } } new Vue({
el: '#app', render:function (createElement) {
//2.使用组件 return createElement(Cpn) } }) 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.js官网
关于Vue中 render: h => h(App) 的具体含义的理解
终于搞懂了vue 的 render 函数
前端学习交流，群内学习讨论的氛围很好，大佬云集，期待您的加入： 点击加入
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/226098.html原文链接：https://javaforall.net
