key是給每一個vnode的唯一id,可以依靠key,更準確, 更快的拿到oldVnode中對應的vnode節點。
-
更準確
因爲帶key就不是就地複用了，在sameNode函數 a.key === b.key對比中可以避免就地複用的情況。所以會更加準確。 -
更快
利用key的唯一性生成map對象來獲取對應節點，比遍歷方式更快。
vue和react都是採用diff算法來對比新舊虛擬節點，從而更新節點。在交叉對比中，當新節點跟舊節點頭尾交叉對比沒有結果時，會根據新節點的key去對比舊節點數組中的key，從而找到相應舊節點（這裏對應的是一個key => index 的map映射）。如果沒找到就認爲是一個新增節點。而如果沒有key，那麼就會採用遍歷查找的方式去找到對應的舊節點。一種一個map映射，另一種是遍歷查找。相比而言。map映射的速度更快。
不帶有key，並且使用簡單的模板，基於這個前提下，可以更有效的複用節點，diff速度來看也是不帶key更加快速的，因爲帶key在增刪節點上有耗時。這就是vue文檔所說的默認模式。但是這個並不是key作用，而是沒有key的情況下可以對節點就地複用，提高性能。這種模式會帶來一些隱藏的副作用，比如可能不會產生過渡效果，或者在某些節點有綁定數據（表單）狀態，會出現狀態錯位。VUE文檔也說明了。還有就是key的作用是爲了在diff算法執行時更快的找到對應的節點，提高diff速度，但是這個含有爭議。
整理來自木易楊
key的作用