數(shù)組的v-for

item in items

item of items

item,index in items

(item，index) in items

對(duì)象的v-for（鍵值，鍵名，索引）

value in object

(value, key) in object

(value, key, index) in object

v-for渲染的列表的結(jié)構(gòu)采用“就地復(fù)用”的策略，也就說(shuō)當(dāng)數(shù)據(jù)重新排列數(shù)據(jù)時(shí)，會(huì)復(fù)用已在頁(yè)面渲染好的元素，不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，這種模式是高效的，改變現(xiàn)有位置的結(jié)構(gòu)的數(shù)據(jù)即可

eg：

問(wèn)題：點(diǎn)擊翻轉(zhuǎn)數(shù)組哦，高亮并沒(méi)有跟隨1 在最后，而是直接復(fù)用在4上

原因：點(diǎn)擊翻轉(zhuǎn)數(shù)組哦，高亮并沒(méi)有跟隨1 在最后，而是直接復(fù)用在4上

解決：需要提供一個(gè)唯一的key值（常用ID），以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素

補(bǔ)充知識(shí)：vue---綁定key值與不綁定key的作用及其優(yōu)點(diǎn)

vue—key值綁定的作用及優(yōu)點(diǎn)

**

本文基于vue2x版本進(jìn)行解析：

綁定key值：可以更快速和更精確的確定變化數(shù)據(jù)的位置，并進(jìn)行響應(yīng)式操作，在一定量的數(shù)據(jù)之上時(shí)，是高性能的，更多的情況下與v-for一起使用；

不綁定key值：vue默認(rèn)機(jī)制狀態(tài)下的，當(dāng)小于一定數(shù)據(jù)量時(shí)，并且DOM數(shù)據(jù)簡(jiǎn)單處理時(shí)，在刻意使用的情況下，vue的默認(rèn)機(jī)制是更加高性能的，僅限于數(shù)據(jù)量較小，數(shù)據(jù)類(lèi)型簡(jiǎn)單且后續(xù)不會(huì)有過(guò)多更新時(shí)使用。

總的來(lái)說(shuō)，綁定key值與v-for綁定使用效果更好，不綁定key，在簡(jiǎn)單場(chǎng)景下使用性能更高，各有優(yōu)缺點(diǎn)，可根據(jù)使用場(chǎng)景，按需使用。

代碼分析見(jiàn)下文（如有錯(cuò)誤請(qǐng)不吝指出，如正確必采納改正）

1.在不綁定key的時(shí)候：

vue中的默認(rèn)機(jī)制是不綁定key，

<div class="father" v-for=" item in data">
  <div>1</div> //node：a  默認(rèn)狀態(tài)下的不綁定key的虛擬節(jié)點(diǎn)
  <div>2</div> //node：b
  <div>3</div> //node：c
  <div>4</div> //node：d
</div>

此狀態(tài)下的key值發(fā)生變化，更新的機(jī)制則是{就地更新}，但相應(yīng)的虛擬節(jié)點(diǎn)不會(huì)發(fā)生變化`如下所示：這種是vue的默認(rèn)機(jī)制，就地更新，適用于簡(jiǎn)單的DOM數(shù)據(jù)渲染，在一定的數(shù)據(jù)量下，是比key值綁定更加高性能的；

<div class="father" v-for=" item in data">
  <div>2</div> //node：a  數(shù)據(jù)變化后，默認(rèn)機(jī)制的標(biāo)識(shí)沒(méi)有變化，
  <div>3</div> //node：b
  <div>4</div> //node：c
  <div>1</div> //node：d
</div>

2：在綁定key值的時(shí)候：

此時(shí)，所有的虛擬節(jié)點(diǎn)均被綁定唯一的標(biāo)識(shí)，類(lèi)似于身份證的作用；

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

如果其中的數(shù)據(jù)發(fā)生變化，diff算法會(huì)映射到變化的虛擬節(jié)點(diǎn)，更加快速和精準(zhǔn)的找到變化的節(jié)點(diǎn)，并對(duì)其進(jìn)行newkey和oldkey的值判斷，進(jìn)行相應(yīng)的更新操作：如下

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

key的唯一標(biāo)識(shí)是跟隨數(shù)據(jù)變化的，并且唯一對(duì)應(yīng)，

以上這篇基于vue--key值的特殊用處詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論