vue进阶篇 - 关于render函数

「这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战」。

上一篇简单的和大家介绍了关于vue-cli使用方式，本期我会给大家介绍一下关于render函数的内容，也就是main.js入口文件中的内容；main.js中引用的vue默认是精简版的使用没有模板解析器，只要标准版的vue才会存在模板解析器，因为在vue项目中使用es6的方式调用vue默认接受调用精简版的。精简版好处是的比标准版容量更加小巧只是精简版需要使用render函数作为模板解析；

关于不同版本的Vue

1. vue.js与vue.runtime.xxx.js的区别：
   1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
   2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

当我们在main.js用import Vue from 'vue'的方式来引用vue就会通过vue底层代码帮我们直接引用的也就是在node_modules文件夹中的vue文件下面图片中的package.json就是指引文件，而dist文件夹下的vue就是我们的真正引用的vue组件了。这方面的内容大家可以私下的自行练习掌握；下面我给大家详细的介绍一下main.js文件的内容:

/* 
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

/* 
关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别：
    (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
    (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。
*/

//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
        render: h => h(App),
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
})

本篇内容我主要是讲的是关于render函数的讲解，render函数是可以接受函数的使用render函数时需要有个返回值就算是空都可以；