快捷導(dǎo)航

淺談VUE中演示v-for為什么要加key

更新時(shí)間：2020年01月16日 16:38:18 作者：Nanshannan

這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

沒(méi)有key

 <div id="app">
  <div>
   <input type="text" v-model="name">
   <button @click="add">添加</button>
  </div>
  <ul>
   <li v-for="(item, i) in list">
    <input type="checkbox"> {{item.name}}
   </li>
  </ul>
<script>
  // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    name: '',
    newId: 3,
    list: [
     { id: 1, name: '李斯' },
     { id: 2, name: '呂不韋' },
     { id: 3, name: '嬴政' }
    ]
   },
   methods: {
    add() {
     //注意這里是unshift
     this.list.unshift({ id: ++this.newId, name: this.name })
     this.name = ''
    }
   }
  });
 </script>
 </div>

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

有key

 <div id="app">
  <div>
   <input type="text" v-model="name">
   <button @click="add">添加</button>
  </div>
  <ul>
   <li v-for="(item, i) in list" :key="item.id">
    <input type="checkbox"> {{item.name}}
   </li>
  </ul>
<script>
  // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    name: '',
    newId: 3,
    list: [
     { id: 1, name: '李斯' },
     { id: 2, name: '呂不韋' },
     { id: 3, name: '嬴政' }
    ]
   },
   methods: {
    add() {
     //注意這里是unshift
     this.list.unshift({ id: ++this.newId, name: this.name })
     this.name = ''
    }
   }
  });
 </script>
 </div>

同樣當(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樹同一層的節(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: