diff算法的目的是為了找出需要更新的節點,而未變化的節點則可以復用
新舊列表的頭尾先互相比較。未找到可復用則開始遍歷,對比過程中指針逐漸向列表中間靠攏,直到遍歷完其中一個列表
具體策略如下:
-
同層級比較
Vue2的diff算法只會比較同一層級的節點,不會跨層級比較。 -
雙指針法(雙端比較)
Vue2從新舊虛擬DOM樹的頭部和尾部開始比較
頭頭比較:如果新舊節點的頭部相同,則直接更新節點并移動頭部指針。
尾尾比較:如果新舊節點的尾部相同,則直接更新節點并移動尾部指針。
頭尾交叉比較:如果舊節點的頭部與新節點的尾部相同,則將舊節點移動到尾部,并移動指針。
尾頭交叉比較:如果舊節點的尾部與新節點的頭部相同,則將舊節點移動到頭部,并移動指針。 -
Vue2通過 key 屬性來優化節點的復用。如果新舊節點的 key 相同,則認為它們是同一個節點,只需更新屬性和內容;否則會進行插入、刪除或移動操作 。
-
節點類型不同:直接替換整個節點。節點類型相同:比較節點的屬性和子節點,遞歸調用diff算法處理子節點 。