问题：
1、render函数是什么
2、render函数怎么用
1. render函数是什么
简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM
因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。
当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,
vm中有一个方法_c,也是这个函数的别名
先看官网对 createElement的介绍
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者
// 解析上述任何一种的一个 async 异步函数，必要参数。
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样，您可以在 template 中使用这些属性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子节点 (VNodes)，由 `createElement()` 构建而成，
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
就是说createElement（params1，params2，params3）接受三个参数，每个参数的类型官方介绍已经说明
2. render函数怎么用
例：
render:(h) => {
return h('div',{ //给div绑定value属性
props: {
value:''
}, //给div绑定样式 style:{ width:'30px' }, //给div绑定点击事件
on: {
click: () => {
console.log('点击事件')
}
},
})
}
如果需要条件判断或循环：
render:(h) => {
const arr = [1, 2] ? [1,2,3]
arr.map(function (item,index) {
return h('div',{ //给div绑定value属性
props: {
value:item
}, //给div绑定样式 style:{ width:'30px' }, //给div绑定点击事件
on: {
click: () => {
console.log('点击事件')
}
},
})
})
}
官网对函数式组件的介绍
深入 data 对象
有一件事要注意：正如在模板语法中，v-bind:class 和 v-bind:style ，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如 innerHTML (这会取代 v-html 指令)。
{
// 和`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'
}
