上述案例再現了以下過程。
如果沒有密鑰,diff算法默認為:
更新C到F,D到C,E到D,最後插入E是不是效率很低?它更新了三次,然後完成了創建插入的操作。
因此,我們需要使用密鑰對每個節點進行唯壹標識,Diff算法可以正確識別該節點並找到正確的位置區域以插入新節點。
創建追加的操作只使用了壹次。
使用密鑰
結論:
單擊第二個項目中的刪除,
原因很簡單。妳認為妳刪除了2,但Vue會認為妳做了兩件事:
從官方文件中引用例子:
如果此處的文本發生變化,整個
如果沒有關鍵屬性:
然後當文本改變時,Vue將重用這些元素,並且只改變
同樣,當key屬性用在組件上時,當key發生變化時,將導致創建壹個新組件並刪除原始組件,然後組件的生命周期掛鉤將被觸發。