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：是否作為跟節點插入，若被包裹的節點，該屬性值為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栗子暫時還沒寫那麼多。這裡只是一個簡單的介紹。若有更好的歡迎大家一起學習討論。

轉載