vue中的render函數介紹

簡介：對於不瞭解slot的用法（參考：大白話vue-slot的用法）又剛接觸render函數的同窗來講，官網的解釋無疑一臉懵逼，這裏就整理下我的對render函數的理解

問題：

　　一、render函數是什麼

　　二、render函數怎麼用

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）接受三個參數，每一個參數的類型官方介紹已經說明

 

render函數怎麼用

　　例：

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

                            })
                        }    

深刻 data 對象

　　有一件事要注意：正如在模板語法中，v-bind:class 和 v-bind:style ，會被特別對待同樣，在 VNode 數據對象中，下列屬性名是級別最高的字段。該對象也容許你綁定普通的 HTML 特性，就像 DOM 屬性同樣，好比 innerHTML (這會取代 v-html 指令)。

 1 {
 2  // 和`v-bind:class`同樣的 API
 3  'class': {
 4   foo: true,
 5   bar: false
 6  },
 7  // 和`v-bind:style`同樣的 API
 8  style: {
 9   color: 'red',
10   fontSize: '14px'
11  },
12  // 正常的 HTML 特性
13  attrs: {
14   id: 'foo'
15  },
16  // 組件 props
17  props: {
18   myProp: 'bar'
19  },
20  // DOM 屬性
21  domProps: {
22   innerHTML: 'baz'
23  },
24  // 事件監聽器基於 `on`
25  // 因此再也不支持如 `v-on:keyup.enter` 修飾器
26  // 須要手動匹配 keyCode。
27  on: {
28   click: this.clickHandler
29  },
30  // 僅對於組件，用於監聽原生事件，而不是組件內部使用
31  // `vm.$emit` 觸發的事件。
32  nativeOn: {
33   click: this.nativeClickHandler
34  },
35  // 自定義指令。注意，你沒法對 `binding` 中的 `oldValue`
36  // 賦值，由於 Vue 已經自動爲你進行了同步。
37  directives: [
38   {
39    name: 'my-custom-directive',
40    value: '2',
41    expression: '1 + 1',
42    arg: 'foo',
43    modifiers: {
44     bar: true
45    }
46   }
47  ],
48  // Scoped slots in the form of
49  // { name: props => VNode | Array<VNode> }
50  scopedSlots: {
51   default: props => createElement('span', props.text)
52  },
53  // 若是組件是其餘組件的子組件，需爲插槽指定名稱
54  slot: 'name-of-slot',
55  // 其餘特殊頂層屬性
56  key: 'myKey',
57  ref: 'myRef'
58 }