什麼是虛拟DOM，它的優點
大家知道，我們頁面渲染，首先需要建構一個DOM樹，用render進行DOM的渲染，傳統開發中，每當DOM樹中的元素發生改變，都需要重新進行一遍DOM的比對，并且進行真實DOM的渲染，這樣是非常損耗性能的。
那麼虛拟DOM實際上就是一個JS對象，用來描述真實DOM，如果操作中有多次更新DOM的動作，會用diff算法進行比對，根據新的内容生成一個新的虛拟DOM（createElement），最終把這個虛拟DOM一次性attch到DOM樹上，這樣就大大節省了性能。雖然看起來新增了一個操作（建立虛拟DOM），但是在js中，js對象的建立是非常不損耗性能的，但是DOM樹的渲染卻非常損耗性能。
Diff算法
虛拟DOM比對中用到了diff算法，diff實際上就是diffrence的意思，就是做對比找差異，diff算法中有一個很重要的原理就是同級比對，如兩個虛拟DOM樹中，div1與div1做比對，div2與div2做比對，互不幹涉，這樣就減少了一個循環查找對應dom節點的一個操作，非常節省性能，提高了頁面渲染的效率。
那麼為什麼diff算法能達到這種效果，不用在DOM樹逐個查找，這是因為Diff算法給虛拟DOM樹給每個DOM節點增加了key值，如圖：第一種情況，我們需要逐個比對，才知道增加的是哪個DOM節點，第二種情況加上key值，我們可以直覺的感受到，增加了z這個DOM節點。
patch函數
diff和patch是一對工具，diff比較兩個虛拟DOM的差異，并記錄下來，生成一個diff檔案，也就是我們常說的patch(更新檔)檔案。
patch能降diff檔案運用原來的兩個集合之一，進而得到另一個集合。舉個例子來說檔案A和檔案B,經過diff之後生成了更新檔檔案C,那麼着個過程相當于 A -B = C ,那麼patch的過程就是B+C = A 或A-C =B。
是以我們隻要能得到A, B, C三個檔案中的任何兩個，就能用diff和patch這對工具生成另外一個檔案。