vue中的diff算法

diff算法簡單總結

使用v-for的時候會需要添加key,針對這個東西做一個總結。

虛擬dom中的key

  1. 當數據發生變化時,vue會根據新數據生成虛擬DOM。
  2. 隨後新的與舊的虛擬DOM會使用diff算法比較差異。

規則

  1. 舊虛擬DOM先找到和新的虛擬DOM相同的KEY。
  2. 若KEY相同,內容也相同直接重複使用舊的真實DOM。
  3. 若KEY相同,內容不同,會把不同內容的地方直接生成新的真實DOM,相同的地方繼續使用舊的真實DOM。(這裡的相同內容是指虛擬dom的相同所以在頁面上輸入的值不會拿來比較)
  4. 若未找到相同的KEY,不比較內容直接成新的真實DOM。

使用index作為key問題

  1. 對於原有排序做破壞性操作的時候會產生不必要的更新。
  2. 若是原本的DOM有表單輸入值的話,會產生畫面問題。

key的選擇

  1. 可以的話使用唯一的uid來作為key。
  2. 如果沒有排序要求的話用index也沒什麼不可以。