vue中render: h => h(App)的詳細解釋

 

2018年06月20日 10:54:32 H-L 閱讀數 5369

 

render: h => h(App) 是下面內容的縮寫：

1.  
   render: function (createElement) {
2.  
   return createElement(App);
3.  
   }

進一步縮寫為(ES6 語法)：

1.  
   render (createElement) {
2.  
   return createElement(App);
3.  
   }

再進一步縮寫為：

1.  
   render ( h){
2.  
   return h(App);
3.  
   }

按照 ES6 箭頭函數的寫法，就得到了：

render: h => h(App);

其中 根據 Vue.js 作者 Even You 的回復，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 元素的，也就是上文中的 generate HTML structures，也就是 Hyperscript，這樣作者才把 createElement 簡寫成 h。

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