簡介：對於不了解slot的用法（參考：大白話vue-slot的用法）又剛接觸render函數的同學來說，官網的解釋無疑一臉懵逼，這里就整理下個人對render函數的理解
問題：
1、render函數是什么
2、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 }