diff算法簡單總結
使用v-for的時候會需要添加key,針對這個東西做一個總結。
虛擬dom中的key
- 當數據發生變化時,vue會根據新數據生成虛擬DOM。
- 隨後新的與舊的虛擬DOM會使用diff算法比較差異。
規則
- 舊虛擬DOM先找到和新的虛擬DOM相同的KEY。
- 若KEY相同,內容也相同直接重複使用舊的真實DOM。
- 若KEY相同,內容不同,會把不同內容的地方直接生成新的真實DOM,相同的地方繼續使用舊的真實DOM。(這裡的相同內容是指虛擬dom的相同所以在頁面上輸入的值不會拿來比較)
- 若未找到相同的KEY,不比較內容直接成新的真實DOM。
使用index作為key問題
- 對於原有排序做破壞性操作的時候會產生不必要的更新。
- 若是原本的DOM有表單輸入值的話,會產生畫面問題。
key的選擇
- 可以的話使用唯一的uid來作為key。
- 如果沒有排序要求的話用index也沒什麼不可以。