摘要

渲染函數是 Vue 模板的一種更接近編譯器的替代方案。它允許我們使用純 JavaScript 來程式化地、完全動態地建構元件的 DOM 結構。

定義與說明

渲染函數通常回傳一個「虛擬節點」(VNode)，Vue 根據這個 VNode 來渲染真實的 DOM。我們使用全域的 h() 函數（Hyperscript 的縮寫）來建立 VNode。

h() 函數接收三個參數：

type：HTML 標籤名或元件。
props：一個包含屬性、特性和事件的物件。
children：一個包含子節點的字串或陣列。

實作範例

Vue SFC

// 使用渲染函數建立一個標題元件。
import { h } from 'vue';

export default {
  props: ['level'],
  render() {
    // 等同於 <template><h1 v-if="level === 1">...</h1>...</template>
    return h(
      `h${this.level}`, // 1. type: 動態標籤名
      {}, // 2. props: 空物件
      this.$slots.default() // 3. children: 預設插槽內容
    );
  }
}

結論

渲染函數提供了比模板更高的編程自由度，適用於需要高度動態邏輯的場景。但它也更冗長、更抽象，對於大多數應用，模板是更簡單、更高效的選擇。

渲染函數 h() VNode