Vue中key屬性的作用

2021-10-01 17:02:15 字數 1769 閱讀 4140

在列表渲染時使用key屬性

使用key屬性強制替換元素

相信大多數vue開發者接觸到key屬性的時候是使用v-for進行列表渲染的時候,如果不使用key屬性,vue會產生警告,那麼在這個時候key屬性的作用是什麼呢?

當 vue.js 用v-for正在更新已渲染過的元素列表時,它預設用「就地復用」策略。如果資料項的順序被改變,vue 將不會移動 dom

元素來匹配資料項的順序, 而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素

假設vue例項的data屬性中有乙個叫numbers的變數,它的值是[1, 2, 3, 7, 8, 9]:

}

種情況下應當是渲染了6個元素,其中的內容分別對應numbers中6個數字,

此時如果numbers變成了[0, 1, 2, 3, 7, 8, 9],即在陣列頭部插入了乙個數字0,

在沒有key屬性的情況下,渲染輸出的更新步驟是這樣的:

原先內容為1的

元素內容變成0,原先內容為2的

元素內容變成1,……以此類推,最後新增乙個

元素,內容為9。

在這種情況下,vue會通過改變原來元素的內容和增加/減少元素來完成這個改變,因為沒有key屬性,vue無法跟蹤每個節點,只能通過這樣的方法來完成變更。

讓我們對以上**進行乙個小修改:

}

官方文件中說:

我這裡用index變數,根據列表渲染的規則,它實際上對應了陣列中每個元素的索引,這樣做的好處是它可以使得每個元素的key值都不同,這是很重要的,如果我們要利用key屬性的優點,必須保證同一父元素的所有子元素有不同的key屬性。

此時如果numbers從[1, 2, 3, 7, 8, 9]變成了[0, 1, 2, 3, 7, 8, 9], 

渲染輸出的更新步驟就變化了:

新增乙個元素,它的內容為0,並將它插入原先內容為1的元素之前。

在有了key屬性之後,vue會記住元素們的順序,並根據這個順序在適當的位置插入/刪除元素來完成更新,這種方法比沒有key屬性時的就地復用策略效率更高。

總體來說,當使用列表渲染時,永遠新增key屬性,這樣可以提高列表渲染的效率,提高了頁面的效能。

key屬性還有另外一種使用方法,即強制替換元素,從而可以觸發元件的生命週期鉤子或者觸發過渡。因為當key改變時,vue認為乙個新的元素產生了,從而會新插入乙個元素來替換掉原有的元素。

借用官方文件上的例子:

}

這裡如果text發生改變,整個元素會發生更新,因為當text改變時,這個元素的key屬性就發生了改變,在渲染更新時,vue會認為這裡新產生了乙個元素,而老的元素由於key不存在了,所以會被刪除,從而觸發了過渡。

假如沒有key屬性:

}

那麼當text改變時,vue會復用元素,只改變元素的內容,而不會有新的元素被新增進來,也不會有舊的元素被刪除。

同理,key屬性被用在元件上時,當key改變時會引起新元件的建立和原有元件的刪除,此時元件的生命週期鉤子就會被觸發。

vue中key屬性的作用

當vue.js用v for正在更新已渲染過的元素列表時,它預設用 就地復用 策略,如果資料項的順序被改變,vue將不會移動dom元素來匹配資料項的順序,而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。numbers的值原來是 1,2,3 現在變為 0,1,2,3 在沒有ke...

vue中key的作用

v for中為什麼要加key呢,這裡我給大家舉個栗子 沒有key text v model name add 新增 button div for item,i in list checkbox li ul 建立 vue 例項,得到 viewmodel var vm newvue methods th...

Vue中key的作用

相信大多數vue開發者接觸到key屬性的時候是使用v for進行列表渲染的時候,如果不使用key屬性,vue會產生警告,那麼在這個時候key屬性的作用是什麼呢?官方文件中說 當 vue.js 用v for正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue 將不會移...