利用patch(diff算法)對(duì)比新舊虛擬DOM記錄到一個(gè)對(duì)象中按需更新变汪,最后創(chuàng)建真實(shí)的DOM。
????????????? 虛擬dom原理流程:模板 ==> 渲染函數(shù) ==> 虛擬DOM樹 ==> 真實(shí)DOM;
????????????? 虛擬DOM 的實(shí)現(xiàn)原理主要包括以下 3 部分:
????????????? 1碱妆、用JavaScript 對(duì)象模擬真實(shí) DOM 樹辛馆,對(duì)真實(shí) DOM 進(jìn)行抽象;
????????????? 2百宇、diff算法—比較兩棵虛擬 DOM 樹的差異考廉;
????????????? 3、pach算法—將兩個(gè)虛擬DOM 對(duì)象的差異應(yīng)用到真正的 DOM 樹携御。
?注:Diff是一種算法,類似排序算法當(dāng)數(shù)據(jù)變化之后,如果直接操作 DOM,瀏覽器會(huì)重新渲染頁(yè)面,消耗性能比較大,使用 Diff 算法,它不直接操作 DOM,而用 js 對(duì)象來(lái)描述真實(shí) DOM,比較 js 對(duì)象是否發(fā)生變化,找到變化的位置,最小化的更新變化的位置,提高了性能,
????????????? 它的執(zhí)行過(guò)程是:在比較開始時(shí)首先對(duì)新老節(jié)點(diǎn)數(shù)組的開始和結(jié)尾節(jié)點(diǎn)設(shè)置標(biāo)記索引昌粤,遍歷比較時(shí)會(huì)出現(xiàn)四種情況:
????????????? a.oldStartVnode/newStartVnode比較: 舊節(jié)點(diǎn)和新節(jié)點(diǎn)從第一個(gè)開始進(jìn)行比較
????????????? b.oldEndVnode/newEndVnode比較 : 舊節(jié)點(diǎn)和新節(jié)點(diǎn)從最后一個(gè)開始進(jìn)行比較
????????????? c.oldStartVnode/newEndVnode比較 : 舊節(jié)點(diǎn)從第一個(gè)和新節(jié)點(diǎn)從最后一個(gè)開始進(jìn)行比較
????????????? d.oldEndVnode/newStartVnode比較 :舊節(jié)點(diǎn)從最后一個(gè)和新節(jié)點(diǎn)從第一個(gè)開始進(jìn)行比較