一、 什么是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（虛擬節(jié)點）。

2. render函數的返回值

render函數的返回值是VNode（虛擬節(jié)點），本質上的是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'
 },
 // 事件監(jiān)聽器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修飾器
 // 需要手動匹配 keyCode。
 on: {
  click: this.clickHandler
 },
 // 僅對于組件，用于監(jiān)聽原生事件，而不是組件內部使用
 // `vm.$emit` 觸發(fā)的事件。
 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'
}