key
的作用主要是為了更高效的對比虛擬DOM中每個節點是否是相同節點;
Vue在patch
過程中判斷兩個節點是否是相同節點,key是一個必要條件,渲染一組列表時,key往往是唯一標識,所以如果不定義key的話,Vue
只能認為比較的兩個節點是同一個,哪怕它們實際上不是,這導致了頻繁更新元素,使得整個patch
過程比較低效,影響性能;
從源碼中可以知道,Vue判斷兩個節點是否相同時主要判斷兩者的key和元素類型等,因此如果不設置key,它的值就是undefined
,則可能永遠認為這是兩個相同的節點,只能去做更新操作,這造成了大量的dom更新操作,明顯是不可取的。