天天看點

vue項目中,清單元件為什麼要寫key抛出結論,寫key是為了高效的更新虛拟DOM渲染清單的時候,為什麼要寫key,并且值是id或者index這種唯一的辨別

抛出結論,寫key是為了高效的更新虛拟DOM

渲染清單的時候,為什麼要寫key,并且值是id或者index這種唯一的辨別

diff算法

對操作前後的dom樹同一層的節點進行對比,一層一層對比,如下圖

vue項目中,清單元件為什麼要寫key抛出結論,寫key是為了高效的更新虛拟DOM渲染清單的時候,為什麼要寫key,并且值是id或者index這種唯一的辨別

假如不寫key,在一個清單插入新元素 

vue項目中,清單元件為什麼要寫key抛出結論,寫key是為了高效的更新虛拟DOM渲染清單的時候,為什麼要寫key,并且值是id或者index這種唯一的辨別

一層一層比較

vue項目中,清單元件為什麼要寫key抛出結論,寫key是為了高效的更新虛拟DOM渲染清單的時候,為什麼要寫key,并且值是id或者index這種唯一的辨別

過程是F替換C,C替換D,D替換E,再最後插入E,但實際上隻是新插入了一個F而已。

如果寫了key,結果怎麼樣呢

vue項目中,清單元件為什麼要寫key抛出結論,寫key是為了高效的更新虛拟DOM渲染清單的時候,為什麼要寫key,并且值是id或者index這種唯一的辨別

結果就是,寫key是為了高效的更新虛拟DOM