使用render函数渲染vue组件,vue render
主要介绍了为什么在Vue中引入渲染功能的实现。通过示例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
前言、背景和原理、后记
前言
在用Vue Scaffolding创建的项目的入口文件main.js中，默认代码如下：
从“vue”导入Vue
从导入应用程序。/App.vue
Vue.config.productionTip=false
新Vue({
render: h=h(App)，
}).$ mount(“# app”)
可以看到，App组件是通过代码中的import引入的，但并不是通过components注册的，使用的是render函数而不是template属性。
//上面代码的等价写法
从“Vue/dist/Vue”//导入Vue注意这里的区别。
从导入应用程序。/App.vue
Vue.config.productionTip=false
新Vue({
模板：` App/`，
组件：{ App }，
}).$ mount(“# app”)
要知道为什么上面的代码是等价的，需要从不同版本的Vue说起。
背景
Vue由两部分组成，一部分是核心功能，包括生命周期和事件处理，另一部分是模板解析器，用来解析Vue模板。
Vue.js包含了这两部分的所有内容(也就是Vue的完整版)，但是会有一个问题。项目开发打包时，打包的文件会引入Vue完整版的所有代码，但实际上打包的输出文件中已经不需要Vue模板解析器的代码了(模板已经解析，浏览器可以直接运行)。引入Vue完整版只会增加打包文件的体积。
为了解决这个问题，vue团队提供了不同版本的Vue，vue.js就是Vue的完整版。其他版本是在vue.js完整版上精简的，比如vue.runtime.*是Vue的运行版本，不包括Vue模板解析器的部分代码。
既然Vue有不同的版本，那么我们在导入Vue的时候用的是哪个版本呢？
查看vue包中的package.json文件，可以发现ES6模块化的入口文件是vue.runtime.esm.js，也就是vue默认为我们介绍了Vue的运行版本，其中并不包括模板解析器的部分代码。
运行Vue版本解析模板，需要使用render函数。在Vue的官方案例中，导入文件main.js的内容如下，其中render函数用于模板解析。
从“vue”导入Vue
从导入应用程序。/App.vue
Vue.config.productionTip=false
新Vue({
render: h=h(App)，
}).$ mount(“# app”)
如果我们使用template属性进行模板解析，错误：您正在使用vue的仅运行时版本，其中模板编译器不可用。要么将模板预编译到呈现函数中，要么使用编译器包含的构建。
//如果从‘vue/dist/vue’导入vue完整版，代码不会报错。
从‘vue’/导入Vue默认导入的是Vue的运行版本，用template写模板会报错。
Vue.config.productionTip=false
新Vue({
模板：` h1hello/h1 `，
}).$ mount(“# app”)
注意：上面所说的模板解析是指解析vm配置对象的template属性中定义的模板。
组件中的模板(模板标签中的内容。vue)，vue使用vue-template-compiler来帮助我们解析，可以看出它只在开发依赖中，而不在生产依赖中。这个也很好解释，因为打包的文件浏览器已经可以直接运行了，没有vue模板语法，所以不需要vue-template-compiler。
依赖项:{
“核心-js”:^3.6.5，
^2.6.11
},
devDependencies: {
@vue/cli-plugin-babel: ~4.5.0 ，
@ vue/CLI-plugin-eslint : ~ 4 . 5 . 0 ，
@vue/cli-service: ~4.5.0 ，
“巴别塔-伊斯林”:^10.1.0，
“埃斯林特”:^6.7.2，
“eslint-plugin-vue”:^6.2.2，
“模板编译器”:^2.6.11
},
原理
使用vm的配置对象中的template属性，可以通过HTML语法创建vue模板页面。我们写的Vue模板在渲染到页面之前，会先在底层转换成虚拟Dom(真实Dom)。
利用vm的配置对象中的render函数，可以直接用js构建虚拟DOM，省去了翻译(Vue模板翻译成虚拟Dom)的过程。
后记
关于为什么要介绍Vue中render功能的实现，这篇文章到此为止。更多关于Vue中渲染功能的介绍，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。