Vue Virtual Dom 和 Diff原理(面試必備) 極簡版

 

　　我又來了，這是Vue面試三板斧的最後一招，固然也是極其簡單了，先說Virtual Dom，來一句概念：

　　用js來模擬DOM中的節點。傳說中的虛擬DOM。

 

　　

　　再來一張圖：

　　

　　是否是一會兒秒懂  沒懂再來一張

　　

　　

　　

　　Virtual Dom就先這樣，理解了就OK，下面咱們瞭解一下Diff，老規矩先來一句概念：

　　diff算法就是進行虛擬節點對比，並返回一個patch對象，用來存儲兩個節點不一樣的地方，最後用patch記錄的消息去局部更新Dom。

　　　換句人話

　　diff的過程就是調用名爲patch的函數，比較新舊節點，一邊比較一邊給真實的DOM打補丁

 　　

　　廢話說了不少，上圖

　　

　　多說無益，再來一張圖

　　

　　這個Diff的過程不展開說了，有興趣的童鞋能夠走起，若是還沒懂，再走起

　　

　　敲黑板時間到：

　　基本上上面所講的能理解，差很少Vue Virtual Dom 和 Diff原理你也就懂了，固然更深的還須要本身去看，歡樂時光特別快，又到時候講拜拜