Vue 的 render 方法中 h 是什麼？

#                            

如果你接觸過vue一段時間了，那麼你可能會遇到過rendering 方法在你的app檔案中-- 在最新版本的CLI 中它是一個預設值， 並且是在main.js檔案中:

new Vue({
 render: h => h(App)
}).$mount('#app')

或是，如果你使用了render 方法(函數)，可能會用JSX:

Vue.component('jsx-example', {
  render (h) {
    return <p>bar</p>
  }
})

或許你想知道，h 是用來幹嘛的？它表示什麼意思呢？ h  代表的是  hyperscript 。它是HTML的一部分，表示的是 超文本標記語言：當我們正在處理腳本的時候，在虛擬DOM節點中去使用它進行替換已成為一種慣例。這個定義同時也被運用到其他的框架文件中。詳情請點這裡 Cycle.js。

在這個問題上，Evan 描述到：

Hyperscript 它本身表示的是"生成HTML結構的腳本"

縮寫為h 是因為它更容易去輸入。他還在 Frontend Masters 上描述了這一點 他的高級 Vue 研討會 。

真的，你可以認為它是 createElement 的縮寫。這將是一個長長的形式：

render: function (createElement) {
  return createElement(App);
}

如果我們用h 代替它，那麼我們可以這樣：

render: function (h) {
  return h(App);
}

...然後可以透過使用ES6 縮短：

render: h => h (App)

Vue 版本最多需要三個參數：

render(h) {
  return h('p', {}, [...])
}

• 第一種是元素的類型（這裡顯示為p）。

• 第二個是資料物件。我們在這裡主要包括：props, attrs, dom props, class 和 style.

• 第三個是一組子節點。然後，我們將巢狀呼叫並最終傳回一個虛擬 DOM 節點樹。

更深入的資訊你可以在 Vue 指南 裡找到。

名稱 hyperscript 可能會讓某些人感到困惑，因為 hyperscript 實際上是 一個庫的名字（這些日子沒有更新 ），它實際上有一個 小的生態系統。在這種情況下，我們不是在談論那個特定的實作。

希望能為那些感到困惑的人解決問題！

推薦教學：《JS》

以上是Vue 的 render 方法中 h 是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！