v for使用key的原因

2021-10-25 03:31:34 字數 629 閱讀 8978

1.vue中列表迴圈需加:key=「唯一標識」, 唯一標識最好是item裡面id等。因為vue元件高度復用,增加key可以標識元件的唯一性,更好地區別各個元件。key的作用主要是為了高效地更新虛擬dom。

2.key主要用來做dom diff演算法用的,diff演算法是同級比較,比較當前標籤上的key還有它當前的標籤名,如果key和標籤名都一樣時只是做了乙個移動的操作,不會重新建立元素和刪除元素。

3.沒有key的時候預設使用的是「就地復用」策略。如果資料項的順序被改變,vue不是移動dom元素來匹配資料項的改變,而是簡單復用原來位置的每個元素。如果刪除第乙個元素,在進行比較時發現標籤一樣值不一樣時,就會復用之前的位置,將新值直接放到該位置,以此類推,最後多出乙個就會把最後乙個刪除掉。

4.盡量不要使用索引值index作key值,一定要用唯一標識的值,如id等。因為若用陣列索引index為key,當向陣列中指定位置插入乙個新元素後,因為這時候會重新更新index索引,對應著後面的虛擬dom的key值全部更新了,這個時候還是會做不必要的更新,就像沒有加key一樣,因此index雖然能夠解決key不衝突的問題,但是並不能解決復用的情況。如果是靜態資料,用索引號index做key值是沒有問題的。

5.標籤名一樣,key一樣這時候就會就地復用,如果標籤名不一樣,key一樣不會復用。

V for遍歷 新增key

v for movie in movies 依次從movies中取出movie,並且在元素的內容中,我們可以使用mustache語法,來使用movie 如果在遍歷的過程中,我們需要拿到元素在陣列中的索引值呢?語法格式 v for item,index in items 其中的index就代表了取出的...

v for中key屬性的作用

key 當 vue.js 用v for正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue 將不會移動 dom 元素來匹配資料項的順序,而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。我們在使用的使用經常會使用index 即陣列的下標 來作...

v for中key屬性的作用

key 當 vue.js 用v for正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue 將不會移動 dom 元素來匹配資料項的順序,而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。我們在使用的使用經常會使用index 即陣列的下標 來作...