render函数是组件渲染的重要核心，它跟template模板开发一样，只不过这种形式开发，它(render)更接近底层，这样能让Vue编译时少转换一次。
让我们来看一下哪里能用到render函数。
我们都知道Vue项目入口文件main.js里面有个render函数长下面这样，将项目的App根组件，挂载到根实例上通过render渲染。
new Vue({ render: h => h(App) }).$mount('#app')
我们来解刨一下render函数身体。
render函数返回值是一个VNode -> "virtual node"虚拟节点
render函数的参数是一个createElement函数
第一个 标签名称
第二个 属性值
第三个 标签子级元素
createElement返回值也是一个VNode节点
createElement函数的参数有三个
「代码演示：」
index.js
export default { data() { return { name: '蛙人' } }, render(createElement) { return createElement( "div", { attrs: {title: "蛙人"} }, [ createElement("span", null, "蛙人") ] ) } }
main.js
import config from "./index.js" Vue.component("test", config)
上面会调用标签会创建出一个div带有span子级的内容，注意createElement第二个参数属性这里，这里不能乱写，必须遵守官网风格点击这里。
当然这里肯定有人会问，这样写有什么用，跟template写不一样嘛，render函数这样写还麻烦可读性不强。
分情况，有时候用render更加灵活，咱就拿官网最典型的案例来「举个例子」。
封装一个组件，进行传入数字参数，就显示数字参数的标签，你肯定会先想到这样。
<template> <div> <h1 v-if="num == 1"></h1> <h2 v-if="num == 2"></h2> <h3 v-if="num == 3"></h3> <h4 v-if="num == 4"></h4> <h5 v-if="num == 5"></h5> <h6 v-if="num == 6"></h6> </div> </template>
render函数的实现
<script> render: function (createElement) { return createElement( 'h' + this.num, ) }, props: { num: { type: Number, required: true } } </script>
