一、 什么是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'
}