當前位置:成語大全網 - 新華字典 - vue中v-for循環的時候為什麽要添加:key屬性

vue中v-for循環的時候為什麽要添加:key屬性

官方推薦我們在使用v-for時,給對應的元素或組件添加上壹個:key屬性。

這個其實和Vue的虛擬DOM的Diff算法有關系。

這裏我們借用React’s diff algorithm中的壹張圖來簡單說明壹下:

當某壹層有很多相同的節點時,也就是列表節點時,我們希望插入壹個新的節點

我們希望可以在B和C之間加壹個F,Diff算法默認執行起來是這樣的。

即把C更新成F,D更新成C,E更新成D,最後再插入E,是不是很沒有效率?

所以我們需要使用key來給每個節點做壹個唯壹標識

Diff算法就可以正確的識別此節點

找到正確的位置區插入新的節點。