Vue v for中為什麼要加屬性key

2021-10-02 15:54:48 字數 1129 閱讀 6982

在vue官網中強烈推薦在使用v-for時要加key屬性,這篇文章看看加屬性key和不加屬性key的區別。我們模擬一下vue中對這部分的處理流程。先建立3個div元素,內容為

xiaozhang

xiaowang

xiaoliu

然後在第乙個div元素之前再新增乙個新div元素xiaoli,渲染後的內容如下:

xiaoli

xiaozhang

xiaowang

xiaoliu

我們用乙個物件陣列來模擬這一過程,物件陣列如下:

//帶key資料

var oldlist = [,,]

var newlist = [,,,

]//不帶key資料

var oldlist_ = [,,]

var newlist_ = [,,,

]

帶key的資料裡面物件有key屬性,模擬使用v-for時帶key屬性(:key="item.key")。

首先我們用oldlist建立3個div元素,並插入到父節點中,然後用newlist來更新這3個div元素,並插入新元素"xiaoli"。**如下:

在**中我們進行了詳細的注釋,如**有不明白的地方可以單步除錯一下。

當帶key時,從物件陣列的最後乙個元素開始遍歷,由於元素內容textcontent相同所以不用操作dom,復用之前的dom元素,什麼也不做,遍歷下乙個元素。最後在最前面插入新新增的元素即可。如下圖所示:

當不帶key時,從物件陣列的第乙個元素開始遍歷,由於舊物件陣列的第乙個元素(xiaozhang)和新物件陣列的第乙個物件元素不同(xiaoli),所以要操作dom,把textcontent改為"xiaoli",新舊陣列的第二個元素,和第三個元素處理方式和第乙個元素相同,都需要操作dom,最後還要插入第四個元素「xiaoliu」。如下圖所示:

為什麼要加 include stdafx h

所謂標頭檔案預編譯,就是把乙個工程 project 中使用的一些mfc標準標頭檔案 如windows.h afxwin.h 預先編譯,以後該工程編譯時,不再編譯這部分標頭檔案,僅僅使用預編譯的結果。這樣可以加快編譯速度,節省時間。預編譯標頭檔案通過編譯stdafx.cpp生成,以工程名命名,由於預編...

pytho中為什麼要加 u r b 這些

u 表示unicode字串。在python2中,普通字串是以8位ascii碼進行儲存的,而unicode字串則儲存為16位unicode字串,這樣能夠表示更多的字符集。使用的語法是在字串前面加上字首 u。在python3中,所有的字串都是unicode字串。r 表示原始字串 忽略轉義字元 例子1 p...

v for中為什麼要加key,原理是什麼

原理 1.vue實現了一套虛擬dom,使我們可以不直接操作dom元素,只運算元據就可以重新渲染頁面,而隱藏在背後的原理是高效的diff演算法 2.當頁面資料發生改變,diff演算法只會比較同一層級的節點 3.如果節點型別不同,直接乾掉前面的節點,再建立並新增新的節點,不會再比較這個節點後面的子節點 ...