陣列的v-for

item in items

item of items

item,index in items

(item，index) in items

物件的v-for（鍵值，鍵名，索引）

value in object

(value,key) in object

(value,key,index) in object

v-for渲染的列表的結構採用“就地複用”的策略，也就說當資料重新排列資料時，會複用已在頁面渲染好的元素，不會移動 DOM 元素來匹配資料項的順序，這種模式是高效的，改變現有位置的結構的資料即可

eg：

問題：點選翻轉陣列哦，高亮並沒有跟隨1 在最後，而是直接複用在4上

原因：點選翻轉陣列哦，高亮並沒有跟隨1 在最後，而是直接複用在4上

解決：需要提供一個唯一的key值（常用ID），以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素

補充知識：vue---繫結key值與不繫結key的作用及其優點

vue—key值繫結的作用及優點

**

本文基於vue2x版本進行解析：

繫結key值：可以更快速和更精確的確定變化資料的位置，並進行響應式操作，在一定量的資料之上時，是高效能的，更多的情況下與v-for一起使用；

不繫結key值：vue預設機制狀態下的，當小於一定資料量時，並且DOM資料簡單處理時，在刻意使用的情況下，vue的預設機制是更加高效能的，僅限於資料量較小，資料型別簡單且後續不會有過多更新時使用。

總的來說，繫結key值與v-for繫結使用效果更好，不繫結key，在簡單場景下使用效能更高，各有優缺點，可根據使用場景，按需使用。

程式碼分析見下文（如有錯誤請不吝指出，如正確必採納改正）

1.在不繫結key的時候：

vue中的預設機制是不繫結key，

<div class="father" v-for=" item in data">
  <div>1</div> //node：a  預設狀態下的不繫結key的虛擬節點
  <div>2</div> //node：b
  <div>3</div> //node：c
  <div>4</div> //node：d
</div>

此狀態下的key值發生變化，更新的機制則是{就地更新}，但相應的虛擬節點不會發生變化`如下所示：這種是vue的預設機制，就地更新，適用於簡單的DOM資料渲染，在一定的資料量下，是比key值繫結更加高效能的；

<div class="father" v-for=" item in data">
  <div>2</div> //node：a  資料變化後，預設機制的標識沒有變化，
  <div>3</div> //node：b
  <div>4</div> //node：c
  <div>1</div> //node：d
</div>

2：在繫結key值的時候：

此時，所有的虛擬節點均被繫結唯一的標識，類似於身份證的作用；

<div class="father" v-for=" item in data" :key="item.id">
  <div>1</div> //key:a  key值為唯一標識，
  <div>2</div> //key:b
  <div>3</div> //key:c
  <div>4</div> //key:d 
</div>

如果其中的資料發生變化，diff演算法會對映到變化的虛擬節點，更加快速和精準的找到變化的節點，並對其進行newkey和oldkey的值判斷，進行相應的更新操作：如下

<div class="father" v-for=" item in data" :key="item.id">
  <div>4</div> //key:d //數值變化 key值作為唯一標識，跟隨
  <div>2</div> //key:b
  <div>3</div> //key:c
  <div>1</div> //key:a //數值變化 key值作為唯一標識，跟隨
</div>

key的唯一標識是跟隨資料變化的，並且唯一對應，

以上這篇基於vue--key值的特殊用處詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。