vue更新dom的diff演算法

diff演算法使只更新我們修改的那一小塊dom而不要更新整個dom： 

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

判斷是否是相同節點：

function

samevnode (a, b) 

function

patch (oldvnode, vnode)  else
}//some code 
return
vnode
}

patchvnode (oldvnode, vnode) 

else
else
if(ch)else
if(oldch)}}

不設key，newch和oldch只會進行頭尾兩端的相互比較，設key後，除了頭尾兩端的比較外，還會從用key生成的物件oldkeytoidx中查詢匹配的節點，所以為節點設定key可以更高效的利用dom。

先進行4種比較：

如果是olds和e相同，那麼真實dom中的第乙個節點會移到最後；

如果是olde和s相同，那麼真實dom中的最後乙個節點會移到最前；

如果olds和s相同，會呼叫patchvnode方法，繼續判斷這兩個節點的子節點，oldstartindex，newstartindex指向下個節點；

如果olde和e相同，會呼叫patchvnode方法，繼續判斷這兩個節點的子節點，oldstartindex，newstartindex指向上個節點；

如果以上都不匹配，就嘗試在oldchildren中尋找跟newstartvnode具有相同key的節點，如果找不到相同key的節點，說明newstartvnode是乙個新節點，就建立乙個，然後把newstartvnode設定為下乙個節點

我們需要使用key來給每個節點做乙個唯一標識，diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點

如果以上都不行會依次比較如下：

即把c更新成f，d更新成c，e更新成d，最後再插入e 

原文：

vue 虛擬dom 和 diff 演算法

虛擬dom其實就是乙個js物件，就是用物件的方式取代真實的dom操作，把真實的dom操作放在記憶體當中，在記憶體中的物件裡做模擬操作。當頁面開啟時瀏覽器會解析html元素，構建一顆dom樹，將狀態全部儲存起來，在記憶體當中模擬我們真實的dom操作，操作完後又會生成一顆dom樹，兩顆dom樹進行比較，...

Vue虛擬Dom和diff演算法

到底什麼是虛擬dom呢?誕生的原因舉個栗子 就是下圖所示的這個，詳細的闡述了模板 渲染函式 虛擬dom樹 真實dom的乙個過程 虛擬dom的最終目標是將虛擬節點渲染到檢視上。但是如果直接使用虛擬節點覆蓋舊節點的話，會有很多不必要的dom操作。例如，乙個ul標籤下很多個li標籤，其中只有乙個li有變化...

vue的diff演算法

1.當資料發生變化時，vue是怎麼更新節點的？渲染真實dom的開銷很大，比如我們修改了某個資料，如果直接渲染到真實dom會引起整個dom樹的重繪和重排，有沒有可能我們只更新我們修改的那一小塊dom而不更新整個dom呢？diff演算法可以幫助我們。我們根據真實dom生成乙個虛擬dom，當虛擬dom某個...