利用patch（diff算法）對比新舊虛擬DOM記錄到一個對象中按需更新，最后創(chuàng)建真實的DOM。

????????????? 虛擬dom原理流程：模板 ==> 渲染函數(shù) ==> 虛擬DOM樹 ==> 真實DOM；

????????????? 虛擬DOM 的實現(xiàn)原理主要包括以下 3 部分：

????????????? 1、用JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象；

????????????? 2、diff算法—比較兩棵虛擬 DOM 樹的差異；

????????????? 3、pach算法—將兩個虛擬DOM 對象的差異應用到真正的 DOM 樹。

?注：Diff是一種算法,類似排序算法當數(shù)據(jù)變化之后,如果直接操作 DOM,瀏覽器會重新渲染頁面,消耗性能比較大,使用 Diff 算法,它不直接操作 DOM,而用 js 對象來描述真實 DOM,比較 js 對象是否發(fā)生變化,找到變化的位置,最小化的更新變化的位置,提高了性能,

????????????? 它的執(zhí)行過程是:在比較開始時首先對新老節(jié)點數(shù)組的開始和結(jié)尾節(jié)點設(shè)置標記索引，遍歷比較時會出現(xiàn)四種情況:

????????????? a.oldStartVnode/newStartVnode比較: 舊節(jié)點和新節(jié)點從第一個開始進行比較

????????????? b.oldEndVnode/newEndVnode比較 : 舊節(jié)點和新節(jié)點從最后一個開始進行比較

????????????? c.oldStartVnode/newEndVnode比較 : 舊節(jié)點從第一個和新節(jié)點從最后一個開始進行比較

????????????? d.oldEndVnode/newStartVnode比較 :舊節(jié)點從最后一個和新節(jié)點從第一個開始進行比較