vue的diff演算法

1.當資料發生變化時，vue是怎麼更新節點的？

渲染真實dom的開銷很大，比如我們修改了某個資料，如果直接渲染到真實dom會引起整個dom樹的重繪和重排，有沒有可能我們只更新我們修改的那一小塊dom而不更新整個dom呢？diff演算法可以幫助我們。

我們根據真實dom生成乙個虛擬dom，當虛擬dom某個節點的資料改變後會生成乙個新的vnode，然後vnode和oldvnode做對比，發現有不一樣的地方就直接修改在真實的dom上，然後使oldvnode的值為vnode。

diff的過程就是呼叫名為patch的函式，比較新舊節點，一邊比較一邊給真實的dom打補丁。

2. virtual dom和真實dom的區別？

virtual dom是將真實的dom的資料抽取出來，以物件的形式模擬樹形結構。比如dom是這樣的：

對應的virtual dom（偽**）：

3. diff的比較方式？

在採取diff演算法比較新舊節點的時候，比較只會在同層級進行, 不會跨層級比較。

具體請參考大佬文章：