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