一、 什么是render渲染函數(shù)？

一句話概括：在JS代碼中，可以用render函數(shù)來渲染大量重復(fù)繁瑣的DOM。

原理：Vue框架的核心是虛擬DOM，編譯template模板時要轉(zhuǎn)譯成VNode的函數(shù)，當(dāng)用render函數(shù)構(gòu)建DOM時，Vue就免去了轉(zhuǎn)譯的步驟。

二、render函數(shù)詳解

1. render函數(shù)的參數(shù)：createElement函數(shù)

當(dāng)使用render函數(shù)描述虛擬DOM時，Vue提供一個函數(shù)：createElement，這個函數(shù)是就構(gòu)建虛擬DOM所需要的工具。它可以被簡寫為 h 。

• createElement（params1，params2，params3）接收三個參數(shù)：
  params1：要渲染的HTML標(biāo)簽名（必填）
  params2：要渲染的標(biāo)簽的屬性（選填）
  params3：渲染的標(biāo)簽的子元素?cái)?shù)組（選填）

• createElement函數(shù)的返回值是VNode（虛擬節(jié)點(diǎn)）。

2. render函數(shù)的返回值

render函數(shù)的返回值是VNode（虛擬節(jié)點(diǎn)），本質(zhì)上的是createElement函數(shù)生成的VNode。

3. 示例代碼：

       render:(h) => {
                            return h('div',{
　　　　　　　　　　　　　　　　　　　//給div綁定value屬性
                                props: {
                                    value:''
                                },
　　　　　　　　　　　　　　　　　　　//給div綁定樣式
　　　　　　　　　　　　　　　　　　　style:{
　　　　　　　　　　　　　　　　　　　　　　width:'30px'
　　　　　　　　　　　　　　　　　　　},　
　　　　　　　　　　　　　　　　　　　//給div綁定點(diǎn)擊事件　　
                                on: {
                                    click: () => {
                                        console.log('點(diǎn)擊事件')
                                    }
                                },

                            })
                        }    

4. render函數(shù)中存在的屬性

{
 // 和`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)聽原生事件，而不是組件內(nèi)部使用
 // `vm.$emit` 觸發(fā)的事件。
 nativeOn: {
  click: this.nativeClickHandler
 },
 // 自定義指令。注意，你無法對 `binding` 中的 `oldValue`
 // 賦值，因?yàn)?Vue 已經(jīng)自動為你進(jìn)行了同步。
 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'
}