說(shuō)到這個(gè)問(wèn)題想必要舉個(gè)例子了

成都創(chuàng)新互聯(lián)專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、萬(wàn)柏林網(wǎng)絡(luò)推廣、小程序制作、萬(wàn)柏林網(wǎng)絡(luò)營(yíng)銷(xiāo)、萬(wàn)柏林企業(yè)策劃、萬(wàn)柏林品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供萬(wàn)柏林建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

沒(méi)有key

 

  

   
   添加
  
  

   

     {{item.name}}
   
  

 

當(dāng)選中呂不為時(shí)，添加楠楠后選中的確是李斯，并不是我們想要的結(jié)果，我們想要的是當(dāng)添加楠楠后，一種選中的是呂不為

有key

 

  

   
   添加
  
  

   

     {{item.name}}
   
  

 

同樣當(dāng)選中呂不為時(shí)，添加楠楠后依舊選中的是呂不為。

可以簡(jiǎn)單的這樣理解：加了key(一定要具有唯一性) id的checkbox跟內(nèi)容進(jìn)行了一個(gè)關(guān)聯(lián)。是我們想達(dá)到的效果

查過(guò)相關(guān)文檔，圖例說(shuō)明很清晰。

vue和react的虛擬DOM的Diff算法大致相同，其核心是基于兩個(gè)簡(jiǎn)單的假設(shè)
首先講一下diff算法的處理方法，對(duì)操作前后的dom樹(shù)同一層的節(jié)點(diǎn)進(jìn)行對(duì)比，一層一層對(duì)比，如下圖：

當(dāng)某一層有很多相同的節(jié)點(diǎn)時(shí)，也就是列表節(jié)點(diǎn)時(shí)，Diff算法的更新過(guò)程默認(rèn)情況下也是遵循以上原則。

比如一下這個(gè)情況：

我們希望可以在B和C之間加一個(gè)F，Diff算法默認(rèn)執(zhí)行起來(lái)是這樣的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很沒(méi)有效率？
所以我們需要使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn)。

vue中列表循環(huán)需加:key="唯一標(biāo)識(shí)" 唯一標(biāo)識(shí)可以是item里面id index等，因?yàn)関ue組件高度復(fù)用增加Key可以標(biāo)識(shí)組件的唯一性，為了更好地區(qū)別各個(gè)組件 key的作用主要是為了高效的更新虛擬DOM

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。