vue component，vue中的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'}})]
)

vue component。就是說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 指令)。

{// 和`v-bind:class`一樣的 API'class': {foo: true,bar: false},// 和`v-bind:style`一樣的 APIstyle: {color: 'red',fontSize: '14px'},// 正常的 HTML 特性attrs: {id: 'foo'},// 組件 propsprops: {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'
}