亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

1. 簡介

本小節我們將介紹 Vue 渲染函數。包括什么是渲染函數、虛擬 DOM、如何編寫渲染函數。渲染函數是一個難點，通常在一些簡單的項目中不會使用，在處理一些復雜的業務場景時，使用渲染函數往往可以達到事半功倍的效果。

通過本小節的學習我們可以掌握渲染函數的基本用法，如果同學們學完本小節之后對此還不是特別熟悉也沒有關系，我們可以先將基礎知識融會貫通，然后再對該知識點多加練習，相信同學們一定可以熟練掌握。

2. 基礎

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

讓我們用一個簡單的例子來學習，這個例子里 render 函數很實用。假設我們要生成一些帶錨點的標題，標題的尺寸和錨點的地址需要通過屬性傳遞，最終生成如下格式的 DOM 結構：

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

同學們肯定覺得這不是很簡單嗎，于是寫下了如下示例：

代碼解釋：
JS 代碼第 2-33 行，我們定義了組件的模板，通過 v-if 根據傳入的 level 來控制顯示的標簽元素。
JS 代碼第 34-46 行，我們定義了組件 anchored-heading，接收 level 和 href 兩個屬性參數。
HTML 代碼第 2-4 行，使用了組件 anchored-heading。

上述代碼雖然實現了功能，但是代碼冗長，而且在每一個級別的標題中重復書寫了 <a :href="href"><slot></slot></a>。那么如何才能消除這些冗余的代碼呢？我們來嘗試使用 render 函數重寫上面的例子：

通過 render 函數編寫的組件看起來簡單多了！同學們可能暫時還不太理解這段代碼的含義，createElement 是什么？ 這些參數又表示什么含義？我們先帶著這些疑問繼續往下學習。

3. 虛擬 DOM

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

return createElement('h1', this.blogTitle)

createElement 到底會返回什么呢？其實不是一個實際的 DOM 元素。它更準確的名字可能是 createNodeDescription，因為它所包含的信息會告訴 Vue 頁面上需要渲染什么樣的節點，包括及其子節點的描述信息。我們把這樣的節點描述為 “虛擬節點 (virtual node)”，也常簡寫它為 “VNode”。“虛擬 DOM” 是我們對由 Vue 組件樹建立起來的整個 VNode 樹的稱呼。

4. createElement 參數

接下來你需要熟悉的是如何在 createElement 函數中使用模板中的那些功能。這里是 createElement 接受的參數：

createElement(
  // {String | Object | Function}
  // 一個 HTML 標簽名、組件選項對象，或者
  // resolve 了上述任何一種的一個 async 函數。必填項。
  'div',

  // {Object}
  // 一個與模板中屬性對應的數據對象?？蛇x。
  {
    // (詳情見下一節)
  },

  // {String | Array}
  // 子級虛擬節點 (VNodes)，由 `createElement()` 構建而成，
  // 也可以使用字符串來生成“文本虛擬節點”。可選。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

也就是說，我們通過 createElement 函數來遞歸創建我們的節點標簽。

5. 深入數據對象

有一點要注意：正如 v-bind:class 和 v-bind:style 在模板語法中會被特別對待一樣，它們在 VNode 數據對象中也有對應的頂層字段。該對象也允許你綁定普通的 HTML attribute，也允許綁定如 innerHTML 這樣的 DOM 屬性 (這會覆蓋 v-html 指令)。

{
  // 與 `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 屬性
  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',
  // 其它特殊頂層屬性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函數中給多個元素都應用了相同的 ref 名，
  // 那么 `$refs.myRef` 會變成一個數組。
  refInFor: true
}

現在我們再來回顧上述的例子是不是很簡單？

• 首先，我們通過 createElement 函數創建 h 標簽；
• 它的子集是 createElement 函數創建的 a 標簽；
• a 標簽的子集是通過 this.$slots.default 獲取的默認插槽。

6. 小結

本節，我們帶大家學習了 Vue 渲染函數的使用方法。主要知識點有以下幾點：

• 使用渲染函數 render 代替 template 模板。
• 虛擬 DOM 的定義，createElement 函數的使用。