render函数是vue中生成虚拟dom的底层api，可用于在组件封装中使用js编写动态模板，实现js的完全编程能力。
vue中在一些复杂场景下使用template模板不太方便，例如需要引入大量子组件时，使用template模板会使代码重复冗余，这时用render函数就可以轻松解决问题。
一、render函数的背景
在深入渲染函数之前，建议先了解一下vue的渲染原理。
1、虚拟dom
vue通过建立一个虚拟DOM来追踪自己要如何改变真实DOM。真实DOM的属性有几百个，为了更高效的来完成dom对比及局部更新，vue引入虚拟DOM的方式来模拟真实dom节点。
通过调用createElement()方法，生成createNodeDescription，即VNode，而虚拟DOM是所有VNode建立的整个DOM数的总称。
当数据更新时，会生成新的虚拟DOM，与旧的虚拟DOM进行diff对比，本质上就是tree树形结构数据的递归遍历比对，找出不同的VNode数据；然后对变化的这部分VNode通过patch生成真实DOM渲染出来。
2、渲染过程
vue的渲染过程大致可以分成4个阶段：
- 模板解析生辰AST数
- AST数解析生成对应的render函数
- 数据通过render函数解析生成VNode
- VNode经过diff和patch后生成真实DOM展示
二、render函数的使用
1、应用场景示例
当存在大量引入不同子组件时的场景时，template只能逐个引入子组件写死，而render函数可以用js动态编写html模板。
这里举用官网的代码例子。
- 使用template书写：
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
- 使用render书写：
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})
2、createElement 参数
-
第一个参数
- 参数类型：String | Object | Function
- 是否必填：是
- 参数描述：参数为html标签名 或组件选项对象 或resolve了上述任何一种的async函数
- 代码示例：
// String createElement('div', 'hello world!') // Object createElement({ template: `<div>hello world!</div>` }) // Function createElement(async () => { return new Promise((resolve) => { setTimeout(() => { resolve({ template: `<div>hello world!</div>` }) }, 1000) }) }) -
第二个参数
- 参数类型：Object
- 是否必填：否
- 参数描述：参数为一个与模板中attribute对应的数据对象，用于表示节点属性
- 代码示例：
{ // 与 `v-bind:class` 的 API 相同， // 接受一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, // 与 `v-bind:style` 的 API 相同， // 接受一个字符串、对象，或对象组成的数组 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML attribute attrs: { id: 'foo' }, // 组件 prop props: { myProp: 'bar' }, // DOM property domProps: { innerHTML: 'baz' }, // 事件监听器在 `on` 内， // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。 // 需要在处理函数中手动检查 keyCode。 on: { click: this.clickHandler }, // 仅用于组件，用于监听原生事件，而不是组件内部使用 // `vm.$emit` 触发的事件。 nativeOn: { click: this.nativeClickHandler }, // 自定义指令。注意，你无法对 `binding` 中的 `oldValue` // 赋值，因为 Vue 已经自动为你进行了同步。 directives: [ { name: 'my-custom-directive', value: '2', expression: '1 + 1', arg: 'foo', modifiers: { bar: true } } ], // 作用域插槽的格式为 // { name: props => VNode | Array<VNode> } scopedSlots: { default: props => createElement('span', props.text) }, // 如果组件是其它组件的子组件，需为插槽指定名称 slot: 'name-of-slot', // 其它特殊顶层 property key: 'myKey', ref: 'myRef', // 如果你在渲染函数中给多个元素都应用了相同的 ref 名， // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true } -
第三个参数
- 参数类型：String | Array
- 是否必填：否
- 参数描述：参数为文本虚拟节点字符串 或由
createElement()构建而成的子级虚拟节点，用于描述子节点。 - 代码示例：
createElement( 'div', { class: { title: true }, style: { border: '1px solid', padding: '10px' } }, [ createElement('h1', 'Hello Vue!'), createElement('p', 'Hello world!') ] ) -
注意：
严格地说，第二个参数和第三个参数并不是绝对的第几个，如果只有两个参数，而第二个参数是字符串或数组类型，那这里第二个参数实际上会作为上述介绍中的第三种参数来使用。// 例如 createElement( 'div', [ createElement('h1', 'Hello Vue!'), createElement('p', 'Hello world!') ] ) // 这里第二个参数会作为子节点来使用，解析结果为： <div> <h1>Hello Vue!</h1> <p>Hello world!</p> </div>
三、使用JSX
使用render函数书写复杂组件时还是显得代码比较繁琐不清晰，而使用JSX就方便多了，vue中也可以配置使用JSX。
配置教程（官方文档）：
- 安装依赖：
npm i -D @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props - 配置babel：
babel.config.js里配置添加：module.exports = { presets: ['@vue/babel-preset-jsx'], } - 愉快地使用：
render() { return ( <input type="email" placeholder={ this.placeholderText} /> ) }
参开链接：https://juejin.cn/post/6844903973502058504#heading-1