render函數是vue中生成虛拟dom的底層api，可用于在元件封裝中使用js編寫動态模闆，實作js的完全程式設計能力。
vue中在一些複雜場景下使用template模闆不太友善，例如需要引入大量子元件時，使用template模闆會使代碼重複備援，這時用render函數就可以輕松解決問題。
一、render函數的背景
在深入渲染函數之前，建議先了解一下vue的渲染原理。
1、虛拟dom
vue通過建立一個虛拟DOM來追蹤自己要如何改變真實DOM。真實DOM的屬性有幾百個，為了更高效的來完成dom對比及局部更新，vue引入虛拟DOM的方式來模拟真實dom節點。
通過調用createElement()方法，生成createNodeDescription，即VNode，而虛拟DOM是所有VNode建立的整個DOM數的總稱。
當資料更新時，會生成新的虛拟DOM，與舊的虛拟DOM進行diff對比，本質上就是tree樹形結構資料的遞歸周遊比對，找出不同的VNode資料；然後對變化的這部分VNode通過patch生成真實DOM渲染出來。
2、渲染過程
vue的渲染過程大緻可以分成4個階段：
- 模闆解析生辰AST數
- AST數解析生成對應的render函數
- 資料通過render函數解析生成VNode
- VNode經過diff和patch後生成真實DOM展示
二、render函數的使用
1、應用場景示例
當存在大量引入不同子元件時的場景時，template隻能逐個引入子元件寫死，而render函數可以用js動态編寫html模闆。
這裡舉用官網的代碼例子。
- 使用template書寫：
<script type="text/x-template" id="anchored-heading-template">
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
</script>
Vue.component('anchored-heading', {
template: '#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
}
})
- 使用render書寫：
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标簽名稱
this.$slots.default // 子節點數組
)
},
props: {
level: {
type: Number,
required: true
}
}
})
2、createElement 參數
- 第一個參數
- 參數類型：String | Object | Function
- 是否必填：是
- 參數描述：參數為html标簽名 或元件選項對象 或resolve了上述任何一種的async函數
- 代碼示例：
// String createElement('div', 'hello world!') // Object createElement({ template: `<div>hello world!</div>` }) // Function createElement(async () => { return new Promise((resolve) => { setTimeout(() => { resolve({ template: `<div>hello world!</div>` }) }, 1000) }) }) - 第二個參數
- 參數類型：Object
- 是否必填：否
- 參數描述：參數為一個與模闆中attribute對應的資料對象，用于表示節點屬性
- 代碼示例：
{ // 與 `v-bind:class` 的 API 相同， // 接受一個字元串、對象或字元串和對象組成的數組 'class': { foo: true, bar: false }, // 與 `v-bind:style` 的 API 相同， // 接受一個字元串、對象，或對象組成的數組 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML attribute attrs: { id: 'foo' }, // 元件 prop props: { myProp: 'bar' }, // DOM property 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 } } ], // 作用域插槽的格式為 // { name: props => VNode | Array<VNode> } scopedSlots: { default: props => createElement('span', props.text) }, // 如果元件是其它元件的子元件，需為插槽指定名稱 slot: 'name-of-slot', // 其它特殊頂層 property key: 'myKey', ref: 'myRef', // 如果你在渲染函數中給多個元素都應用了相同的 ref 名， // 那麼 `$refs.myRef` 會變成一個數組。 refInFor: true } - 第三個參數
- 參數類型：String | Array
- 是否必填：否
- 參數描述：參數為文本虛拟節點字元串 或由
createElement()
- 代碼示例：
createElement( 'div', { class: { title: true }, style: { border: '1px solid', padding: '10px' } }, [ createElement('h1', 'Hello Vue!'), createElement('p', 'Hello world!') ] ) -
注意：
嚴格地說，第二個參數和第三個參數并不是絕對的第幾個，如果隻有兩個參數，而第二個參數是字元串或數組類型，那這裡第二個參數實際上會作為上述介紹中的第三種參數來使用。
// 例如 createElement( 'div', [ createElement('h1', 'Hello Vue!'), createElement('p', 'Hello world!') ] ) // 這裡第二個參數會作為子節點來使用，解析結果為： <div> <h1>Hello Vue!</h1> <p>Hello world!</p> </div>
三、使用JSX
使用render函數書寫複雜元件時還是顯得代碼比較繁瑣不清晰，而使用JSX就友善多了，vue中也可以配置使用JSX。
配置教程（官方文檔）：
- 安裝依賴：
npm i -D @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props - 配置babel：
babel.config.js
module.exports = { presets: ['@vue/babel-preset-jsx'], } - 愉快地使用：
render() { return ( <input type="email" placeholder={this.placeholderText} /> ) }
參開連結：https://juejin.cn/post/6844903973502058504#heading-1
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)