Vue 推薦在絕大多數(shù)情況下使用模板來創(chuàng)建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)你可以用渲染函數(shù)，它比模板更接近編譯器。

讓我們深入一個(gè)簡單的例子，這個(gè)例子里 render 函數(shù)很實(shí)用。假設(shè)我們要生成一些帶錨點(diǎn)的標(biāo)題：

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

錨點(diǎn)標(biāo)題的使用非常頻繁，我們應(yīng)該創(chuàng)建一個(gè)組件：

<anchored-heading :level="1">Hello world!</anchored-heading>

當(dāng)開始寫一個(gè)只能通過 level prop 動(dòng)態(tài)生成標(biāo)題 (heading) 的組件時(shí)，我們很快就可以得出這樣的結(jié)論：

const app = Vue.createApp({})


app.component('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>
  `,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

這個(gè)模板感覺不太好。它不僅冗長，而且我們?yōu)槊總€(gè)級(jí)別標(biāo)題重復(fù)書寫了 <slot></slot>。當(dāng)我們添加錨元素時(shí)，我們必須在每個(gè) v-if/v-else-if 分支中再次重復(fù)它。

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

const app = Vue.createApp({})


app.component('anchored-heading', {
  render() {
    const { h } = Vue


    return h(
      'h' + this.level, // tag name
      {}, // props/attributes
      this.$slots.default() // array of children
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

render() 函數(shù)的實(shí)現(xiàn)要精簡得多，但是需要非常熟悉組件的實(shí)例 property。在這個(gè)例子中，你需要知道，向組件中傳遞不帶 v-slot 指令的子節(jié)點(diǎn)時(shí)，比如 anchored-heading 中的 Hello world! ，這些子節(jié)點(diǎn)被存儲(chǔ)在組件實(shí)例中的 $slots.default 中。如果你還不了解，在深入渲染函數(shù)之前推薦閱讀實(shí)例 property API。

#DOM 樹

在深入渲染函數(shù)之前，了解一些瀏覽器的工作原理是很重要的。以下面這段 HTML 為例：

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

當(dāng)瀏覽器讀到這些代碼時(shí)，它會(huì)建立一個(gè) ”DOM 節(jié)點(diǎn)“ 樹 來保持追蹤所有內(nèi)容，如同你會(huì)畫一張家譜樹來追蹤家庭成員的發(fā)展一樣。

每個(gè)元素都是一個(gè)節(jié)點(diǎn)。每段文字也是一個(gè)節(jié)點(diǎn)。甚至注釋也都是節(jié)點(diǎn)。一個(gè)節(jié)點(diǎn)就是頁面的一個(gè)部分。就像家譜樹一樣，每個(gè)節(jié)點(diǎn)都可以有孩子節(jié)點(diǎn) (也就是說每個(gè)部分可以包含其它的一些部分)。

高效地更新所有這些節(jié)點(diǎn)會(huì)是比較困難的，不過所幸你不必手動(dòng)完成這個(gè)工作。你只需要告訴 Vue 你希望頁面上的 HTML 是什么，這可以是在一個(gè)模板里：

<h1>{{ blogTitle }}</h1>

或者一個(gè)渲染函數(shù)里：

render() {
  return Vue.h('h1', {}, this.blogTitle)
}

在這兩種情況下，Vue 都會(huì)自動(dòng)保持頁面的更新，即便 blogTitle 發(fā)生了改變。

#虛擬 DOM 樹

Vue 通過建立一個(gè)虛擬 DOM 來追蹤自己要如何改變真實(shí) DOM。請仔細(xì)看這行代碼：

return Vue.h('h1', {}, this.blogTitle)

h() 到底會(huì)返回什么呢？其實(shí)不是一個(gè)實(shí)際的 DOM 元素。它更準(zhǔn)確的名字可能是 createNodeDescription，因?yàn)樗男畔?huì)告訴 Vue 頁面上需要渲染什么樣的節(jié)點(diǎn)，包括及其子節(jié)點(diǎn)的描述信息。我們把這樣的節(jié)點(diǎn)描述為“虛擬節(jié)點(diǎn) (virtual node)”，也常簡寫它為 VNode?！疤摂M DOM”是我們對(duì)由 Vue 組件樹建立起來的整個(gè) VNode 樹的稱呼。

#h() 參數(shù)

h() 函數(shù)是一個(gè)用于創(chuàng)建 vnode 的實(shí)用程序。也許可以更準(zhǔn)確地將其命名為 createVNode()，但由于頻繁使用和簡潔，它被稱為 h() 。它接受三個(gè)參數(shù)：

// @returns {VNode}
h(
  // {String | Object | Function | null} tag
  // 一個(gè) HTML 標(biāo)簽名、一個(gè)組件、一個(gè)異步組件，或者 null。
  // 使用 null 將會(huì)渲染一個(gè)注釋。
  //
  // 必需的。
  'div',


  // {Object} props
  // 與 attribute、prop 和事件相對(duì)應(yīng)的對(duì)象。
  // 我們會(huì)在模板中使用。
  //
  // 可選的。
  {},


  // {String | Array | Object} children
  // 子 VNodes, 使用 `h()` 構(gòu)建,
  // 或使用字符串獲取 "文本 Vnode" 或者
  // 有 slot 的對(duì)象。
  //
  // 可選的。
  [
    'Some text comes first.',
    h('h1', 'A headline'),
    h(MyComponent, {
      someProp: 'foobar'
    })
  ]
)

#完整實(shí)例

有了這些知識(shí)，我們現(xiàn)在可以完成我們最開始想實(shí)現(xiàn)的組件：

const app = Vue.createApp({})


/** Recursively get text from children nodes */
function getChildrenTextContent(children) {
  return children
    .map(node => {
      return typeof node.children === 'string'
        ? node.children
        : Array.isArray(node.children)
        ? getChildrenTextContent(node.children)
        : ''
    })
    .join('')
}


app.component('anchored-heading', {
  render() {
    // create kebab-case id from the text contents of the children
    const headingId = getChildrenTextContent(this.$slots.default())
      .toLowerCase()
      .replace(/\W+/g, '-') // replace non-word characters with dash
      .replace(/(^-|-$)/g, '') // remove leading and trailing dashes


    return Vue.h('h' + this.level, [
      Vue.h(
        'a',
        {
          name: headingId,
          href: '#' + headingId
        },
        this.$slots.default()
      )
    ])
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

#約束

#VNodes 必須唯一

組件樹中的所有 VNode 必須是唯一的。這意味著，下面的渲染函數(shù)是不合法的：

render() {
  const myParagraphVNode = Vue.h('p', 'hi')
  return Vue.h('div', [
    // 錯(cuò)誤 - 重復(fù)的Vnode!
    myParagraphVNode, myParagraphVNode
  ])
}

如果你真的需要重復(fù)很多次的元素/組件，你可以使用工廠函數(shù)來實(shí)現(xiàn)。例如，下面這渲染函數(shù)用完全合法的方式渲染了 20 個(gè)相同的段落：

render() {
  return Vue.h('div',
    Array.apply(null, { length: 20 }).map(() => {
      return Vue.h('p', 'hi')
    })
  )
}

#使用 JavaScript 代替模板功能

#v-if 和 v-for

只要在原生的 JavaScript 中可以輕松完成的操作，Vue 的渲染函數(shù)就不會(huì)提供專有的替代方法。比如，在模板中使用的 v-if 和 v-for：

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

這些都可以在渲染函數(shù)中用 JavaScript 的 if/else 和 map() 來重寫：

props: ['items'],
render() {
  if (this.items.length) {
    return Vue.h('ul', this.items.map((item) => {
      return Vue.h('li', item.name)
    }))
  } else {
    return Vue.h('p', 'No items found.')
  }
}

#v-model

v-model 指令擴(kuò)展為 modelValue 和 onUpdate:modelValue 在模板編譯過程中，我們必須自己提供這些prop：

props: ['modelValue'],
render() {
  return Vue.h(SomeComponent, {
    modelValue: this.modelValue,
    'onUpdate:modelValue': value => this.$emit('update:modelValue', value)
  })
}

#v-on

我們必須為事件處理程序提供一個(gè)正確的prop名稱，例如，要處理 click 事件，prop名稱應(yīng)該是 onClick。

render() {
  return Vue.h('div', {
    onClick: $event => console.log('clicked', $event.target)
  })
}

#事件修飾符

對(duì)于 .passive 、 .capture和 .once 事件修飾符，Vue提供了處理程序的對(duì)象語法：

實(shí)例:

render() {
  return Vue.h('input', {
    onClick: {
      handler: this.doThisInCapturingMode,
      capture: true
    },
    onKeyUp: {
      handler: this.doThisOnce,
      once: true
    },
    onMouseOver: {
      handler: this.doThisOnceInCapturingMode,
      once: true,
      capture: true
    },
  })
}

對(duì)于所有其它的修飾符，私有前綴都不是必須的，因?yàn)槟憧梢栽谑录幚砗瘮?shù)中使用事件方法：

這里是一個(gè)使用所有修飾符的例子：

render() {
  return Vue.h('input', {
    onKeyUp: event => {
      // 如果觸發(fā)事件的元素不是事件綁定的元素
      // 則返回
      if (event.target !== event.currentTarget) return
      // 如果向上鍵不是回車鍵，則中止
      // 沒有同時(shí)按下按鍵 (13) 和 shift 鍵
      if (!event.shiftKey || event.keyCode !== 13) return
      // 停止事件傳播
      event.stopPropagation()
      // 阻止該元素默認(rèn)的 keyup 事件
      event.preventDefault()
      // ...
    }
  })
}

#插槽

你可以通過 this.$slots 訪問靜態(tài)插槽的內(nèi)容，每個(gè)插槽都是一個(gè) VNode 數(shù)組：

render() {
  // `<div><slot></slot></div>`
  return Vue.h('div', {}, this.$slots.default())
}

props: ['message'],
render() {
  // `<div><slot :text="message"></slot></div>`
  return Vue.h('div', {}, this.$slots.default({
    text: this.message
  }))
}

要使用渲染函數(shù)將插槽傳遞給子組件，請執(zhí)行以下操作：

render() {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  return Vue.h('div', [
    Vue.h('child', {}, {
      // pass `slots` as the children object
      // in the form of { name: props => VNode | Array<VNode> }
      default: (props) => Vue.h('span', props.text)
    })
  ])
}

#JSX

如果你寫了很多渲染函數(shù)，可能會(huì)覺得下面這樣的代碼寫起來很痛苦：

Vue.h(
  'anchored-heading',
  {
    level: 1
  },
  [Vue.h('span', 'Hello'), ' world!']
)

特別是對(duì)應(yīng)的模板如此簡單的情況下：

<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>

這就是為什么會(huì)有一個(gè) Babel 插件，用于在 Vue 中使用 JSX 語法，它可以讓我們回到更接近于模板的語法上。

import AnchoredHeading from './AnchoredHeading.vue'


new Vue({
  el: '#demo',
  render() {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

有關(guān) JSX 如何映射到 JavaScript 的更多信息，請參閱使用文檔 。

#模板編譯

你可能會(huì)有興趣知道，Vue 的模板實(shí)際上被編譯成了渲染函數(shù)。這是一個(gè)實(shí)現(xiàn)細(xì)節(jié)，通常不需要關(guān)心。但如果你想看看模板的功能具體是怎樣被編譯的，可能會(huì)發(fā)現(xiàn)會(huì)非常有意思。下面是一個(gè)使用 Vue.compile 來實(shí)時(shí)編譯模板字符串的簡單示例：

點(diǎn)擊此處實(shí)現(xiàn)