數組的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 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 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 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 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值的特殊用處詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。