Vue2.0 render: h => h(App)的解釋

render: h => h(App)是ES6的寫法，其實就是如下內容的簡寫：

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

官方文檔中是這樣的，createElement 是 Vue.js 里面的 函數，這個函數的作用就是生成一個 VNode節點，render 函數得到這個 VNode 節點之后，返回給 Vue.js 的 mount 函數，渲染成真實 DOM 節點，並掛載到根節點上。

render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 標簽名稱
      this.$slots.default // 子組件中的陣列
    )
  }

 

然后ES6寫法,

render: createElement => createElement(App)

然后用h代替createElement，使用箭頭函數來寫：

render: h => h(App)

好，現在來解釋h的涵義，尤雨溪在一個回復中提到：

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
它來自單詞 hyperscript，這個單詞通常用在 virtual-dom 的實現中。Hyperscript 本身是指
生成HTML 結構的 script 腳本，因為 HTML 是 hyper-text markup language 的縮寫（超文本標記語言）

也就是說，createElement 函數是用來生成 HTML DOM 元素的，而上文中的 Hyperscript也是用來創建HTML結構的腳本，這樣作者才把 createElement 簡寫成 h。

而 createElement(也就是h)是vuejs里的一個函數。這個函數的作用就是生成一個 VNode節點，render 函數得到這個 VNode 節點之后，返回給 Vue.js 的 mount 函數，渲染成真實 DOM 節點，並掛載到根節點上。

其實在vue 1.0 中，這樣的寫法也就是如下的含義：

new Vue({
  el: '#app',
  template:'</App>'
  componets: {App}
})

然后頁面中使用

<div id='app'>
  <app></app>
</div>

 

參考鏈接：https://segmentfault.com/q/1010000007130348