Vue2.x中的Render函數

Render函數是Vue2.x版本新增的一個函數；使用虛擬dom來渲染節點提高性能，由於它是基於JavaScript計算。經過使用createElement(h)來建立dom節點。createElement是render的核心方法。其Vue編譯的時候會把template裏面的節點解析成虛擬dom；

什麼是虛擬dom?

虛擬dom不一樣於真正的dom，它是一個JavaScript對象。當狀態發生變化的時候虛擬dom會進行一個diff判斷/運算；而後判斷哪些dom是須要被替換的而不是所有重繪，因此性能會比dom操做高不少。

下面看一張Aresn大神總結的一張圖：

Vue2.x版本中VNode屬性：

tag:當前節點標籤名，

data：當前節點數據對象，

children：子節點數組，

text：當前節點文本，

elm：當前虛擬節點對應的真實dom節點，

ns：節點的namespace( 名稱空間)，

content：編譯做用域，

functionalContext：函數化組件的做用域，即全局上下文，

key：節點標識，有利於patch優化，

componentOptions：建立組件實例時的options，

child：當前節點對應的組件實例，

parent：組件的佔位節點，

raw：原始html，

isStatic：是不是靜態節點，

isRootInsert：是否做爲跟節點插入，若被<transition>包裹的節點，該屬性值爲false，

isComment：是否爲註釋節點，

isCloned：是否爲克隆節點，

isOnce：是否只改變(渲染)一次，或是否有v-once指令；

其中這裏面又有幾種VNode類型：

Aresn大神總結的很好：

TextVNode：文本節點，

ElementVNode：普通元素節點，

ComponentVNode：組件節點，

EmptyVNode：空節點，或者說是沒有內容的註釋節點，

CloneVNode：克隆節點，能夠是以上任意類型節點

說了那麼多；到底何時用虛擬dom才比較好呢？其實 咱們使用的單文件組件就已經夠好了。可是當某些代碼冗餘的時候若是寫單文件組件的話會有好多重複的內容；

接下來介紹其核心函數；

createElement：

createElement接收3個參數：

第一個參數能夠是HTML標籤名，組件或者函數均可以；此參數是必須的；

第二個爲數據對象（可選）；

第三個爲子節點（可選）。

 

附上一個很是簡單的createElement函數demo；

 1 var app = new Vue({
 2     el:"#app",
 3     render:createElement => {
 4         return createElement(
 5             'h2',
 6             [
 7                 createElement(
 8                     'a',
 9                     {
10                         domProps:{
11                             href:"#biaoti"
12                         }
13                     },
14                     "標題"
15                 )
16                ]            
17             );
18 
19         }
20 });

這只是一個createElement函數的使用，而Vue2中VNodeData

class: v-bind/:class

style:v-bind/:style

attrs:dom屬性，如id

props:props,

on:自定義事件等，

 nativeOn:原生事件

像這些也能夠在render函數中實現，若VNode是組件或含有組件的slot，那麼VNode必須是惟一。

 

像日常開發過程當中單文件組件中template寫法更爲簡單，可讀性也高。若是是webpack進行打包的話template也會預編譯成render函數。

這裏demo栗子暫時還沒寫那麼多。這裏只是一個簡單的介紹。如有更好的歡迎你們一塊兒學習討論。

 最近看到不少博客有相同的文章，在此說一句：請尊重做者成果，原創文章，轉載註明出處！