簡介

在使用Vue進行開發的時候，大多數情況下都是使用template進行開發，使用template簡單、方便、快捷，可是有時候需要特殊的場景使用template就不是很適合。因此為了很好使用render函數，我決定深入窺探一下。各位看官如果覺得下面寫的有不正確之處還望看官指出，你們與我的互動就是寫作的最大動力。

場景

官網描述的場景當我們開始寫一個通過 level prop 動態生成 heading 標簽的組件，你可能很快想到這樣實現：

<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  } }})

在這種場景中使用 template 并不是最好的選擇：首先代碼冗長，為了在不同級別的標題中插入錨點元素，我們需要重復地使用 <slot></slot>。

雖然模板在大多數組件中都非常好用，但是在這里它就不是很簡潔的了。那么，我們來嘗試使用 render 函數重寫上面的例子：

Vue.component('anchored-heading', { render: function (createElement) {  return createElement(   'h' + this.level,  // tag name 標簽名稱   this.$slots.default // 子組件中的陣列  ) }, props: {  level: {   type: Number,   required: true  } }})

簡單清晰很多！簡單來說，這樣代碼精簡很多，但是需要非常熟悉 Vue 的實例屬性。在這個例子中，你需要知道當你不使用 slot 屬性向組件中傳遞內容時，比如 anchored-heading 中的 Hello world!，這些子元素被存儲在組件實例中的 $slots.default中。

createElement參數介紹

接下來你需要熟悉的是如何在 createElement 函數中生成模板。這里是 createElement 接受的參數：

createElement( // {String | Object | Function} // 一個 HTML 標簽字符串，組件選項對象，或者 // 解析上述任何一種的一個 async 異步函數，必要參數。 'div', // {Object} // 一個包含模板相關屬性的數據對象 // 這樣，您可以在 template 中使用這些屬性。可選參數。 {  // (詳情見下一節) }, // {String | Array} // 子節點 (VNodes)，由 `createElement()` 構建而成， // 或使用字符串來生成“文本節點”。可選參數。 [  '先寫一些文字',  createElement('h1', '一則頭條'),  createElement(MyComponent, {   props: {    someProp: 'foobar'   }  }) ])