vue中的render函数（通俗、易懂）(vue render ref)

vue中的render函数（通俗、易懂） 文章目录一、初步认识render函数二、为什么使用render函数三、render函数的解析一、初步认识render函数import Vue from 'vue'import App from './App'Vue.config.productionTip = falsenew Vue({ el: '#app', render: h => h(App)})

推荐整理分享vue中的render函数（通俗、易懂）(vue render ref)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue的render的作用和参数,vuejs render,vue render方法,vue.render函数,vue render ref,vue.render函数,vue之render函数详解,vue.render函数,内容如对您有帮助，希望把文章链接给更多的朋友！

在使用脚手架创建vue项目的过程，我们很容易看到render这个函数，相对于其他标签，我们对于render还是比较陌生的，因此写下这篇文章你我共同理解。

二、为什么使用render函数

VUE推荐在绝大多数情况下使用template来创建我们的HTML。然而在一些场景中，我们真的需要JavaScript的完全编程的能力，这就是render函数，它比template更接近编译器。（这是官方的话） 简单来说，我们为什么要使用render函数呢？？ 便是因为我们最经常使用的一个引入。

import Vue from "vue";

这一个引入你看似没有任何问题，但问题恰恰就是出在这。在不同版本的vue中，有vue.js和vue.runtime.xxx.js这两种js文件。其中（1）vue.js是完整版的vue，包含核心功能+模板解析器。（2）vue.runtime.xxx.js是运行版vue，只包含核心功能，没有模板解析器。

VUE开发者为了让我们打包的文件能尽可能小一点，在上述引入的是运行版vue。因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，这时候就需要使用render函数去接收到的createElement函数去指定具体内容，创建html模板。

三、render函数的解析

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

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

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

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

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

createElement 函数的3个参数

一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。类型：String | Object | Function。必需。一个包含模板相关属性的数据对象，你可以在 template 中使用这些特性。类型：Object。可选。子虚拟节点 (VNodes)，由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：String | Array。可选。new Vue({ el: '#app', render:function (createElement) { //1.普通用法 // createElement(标签，{属性}，[内容]) return createElement("h2",{class:"box"},['hello',createElement("button",["按钮"])]) }})

同时createElement也可以传进去一个组件，因此

render: h => h(App)

等同于

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

render函数就到此结束了。