## 一、概述 Vue 推薦在絕大多數情況下使用模板來創建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力，或者用模板創建過于繁瑣和冗長。這時你可以用**渲染函數**，它比模板更接近編譯器。 ## 二、舉例 用模板渲染的： ``` <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 } } }) ``` 用渲染函數的： ``` Vue.component('anchored-heading', { render: function (createElement) { return createElement( 'h' + this.level, // 標簽名稱 this.$slots.default // 子節點數組 ) }, props: { level: { type: Number, required: true } } }) ``` ## 三、虛擬DOM Vue 通過建立一個**虛擬 DOM**來追蹤自己要如何改變真實 DOM。 ``` return createElement( 'h' + this.level, // 標簽名稱 this.$slots.default // 子節點數組 ) ``` `createElement`就創建了一個虛擬節點（VNode)； ## 四、createElement ``` // @returns {VNode} createElement( // {String | Object | Function} // 一個 HTML 標簽名、組件選項對象，或者 // resolve 了上述任何一種的一個 async 函數。必填項。 'div', // {Object} // 一個與模板中屬性對應的數據對象。可選。 { // (詳情見下一節) }, // {String | Array} // 子級虛擬節點 (VNodes)，由 `createElement()` 構建而成， // 也可以使用字符串來生成“文本虛擬節點”。可選。 [ '先寫一些文字', createElement('h1', '一則頭條'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ] ) ``` ## 五、JSX 在 Vue 中使用 JSX 語法，它可以讓我們回到更接近于模板的語法上。可以參考： [JSX](../標準擴展/javascript/TypeScript/JSX.md) ``` import AnchoredHeading from './AnchoredHeading.vue' new Vue({ el: '#demo', render: function (h) { return ( <AnchoredHeading level={1}> <span>Hello</span> world! </AnchoredHeading> ) } }) ``` >[danger] 將`h`作為`createElement`的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的。