一、 什么是render渲染函数？
一句话概括：在JS代码中，可以用render函数来渲染大量重复繁琐的DOM。
原理：Vue框架的核心是虚拟DOM，编译template模板时要转译成VNode的函数，当用render函数构建DOM时，Vue就免去了转译的步骤。
二、render函数详解
1. render函数的参数：createElement函数
当使用render函数描述虚拟DOM时，Vue提供一个函数：createElement，这个函数是就构建虚拟DOM所需要的工具。它可以被简写为 h 。
createElement（params1，params2，params3）接收三个参数：
params1：要渲染的HTML标签名（必填）
params2：要渲染的标签的属性（选填）
params3：渲染的标签的子元素数组（选填）createElement函数的返回值是VNode（虚拟节点）。
2. render函数的返回值
render函数的返回值是VNode（虚拟节点），本质上的是createElement函数生成的VNode。
3. 示例代码：
render:(h) => {
return h('div',{
//给div绑定value属性
props: {
value:''
},
//给div绑定样式
style:{
width:'30px'
},
//给div绑定点击事件
on: {
click: () => {
console.log('点击事件')
}
},
})
}
4. render函数中存在的属性
{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
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
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
