快捷導(dǎo)航

Vue深入理解之v-for中key的真正作用

更新時(shí)間：2022年05月05日 09:11:14 作者：Cookcyq

為了給Vue一個(gè)提示,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下

前言

大家應(yīng)該都知道， v-for 中 key 最常用的綁定方式有兩種：

第一種用 index
第二種用唯一 id

那么接下來筆者將用幾個(gè)小案例來講述這兩種方式在渲染時(shí)有什么明顯的差別。

第一種： key 采用 index

我們先來看看代碼

<template>
  <div class="root">
    <div class="item" v-for="(item, index) in list" :key="index">
      <h2>{{ item.text }}</h2>
    </div>
    <button @click="replaceData">替換數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {text: '33333'},
        {text: '66666'},
        {text: '99999'},
      ]
    }
  },
  methods: {
    replaceData() {
      this.list = [
        {text: '22222'},
        {text: '44444'},
        {text: '88888'},
      ]
    }
  }
}
</script>
<style lang="scss">
.item{ background: orange;}
</style>

這里我們渲染了 list 數(shù)組，并將 index 作為 key ，然后還添加一個(gè)替換數(shù)據(jù)按鈕事件，我們來看看效果

當(dāng)我們點(diǎn)擊替換數(shù)據(jù) 這個(gè)按鈕時(shí)，數(shù)據(jù)變成這樣

一切看起來很正常對(duì)吧，接下來就是重點(diǎn)了，我們要做點(diǎn)小改動(dòng)，首先我們先刷新下頁面讓數(shù)據(jù)恢復(fù)成原來的，然后我們將第二條給手動(dòng)刪掉

現(xiàn)在僅剩下 33333 和 99999，此時(shí)我們?nèi)c(diǎn)擊替換數(shù)據(jù) 看看有什么效果

咦，它只替換了第一條和第三條，原來的第二條被我們剛剛刪掉了，導(dǎo)致 44444 沒有渲染出來，這是為啥呢？其實(shí)很簡(jiǎn)單，因?yàn)樘鎿Q數(shù)據(jù)那批數(shù)組的 index 跟第一批數(shù)組是一樣，Vue 判斷是相同后又何必創(chuàng)建 Dom 這種浪費(fèi)資源的操作呢，所以它并不會(huì)給第二條重新創(chuàng)建 Dom ，這便是 index 作為 key 的作用。

Note：表面視圖沒變化，但數(shù)據(jù)是有更新的，你去訪問 list時(shí)，里面還是有三條數(shù)據(jù)22222,44444, 88888，只要記住 Vue 是以數(shù)據(jù)為驅(qū)動(dòng)而不是視圖。

第二種：key 采用唯一 ID

接下來我們來看下第二種，代碼如下

<template>
  <div class="root">
    <div class="item" v-for="(item) in list" :key="item.id">
      <h2>{{ item.text }}</h2>
    </div>
    <button @click="replaceData">替換數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {text: '33333', id: 1},
        {text: '66666', id: 2},
        {text: '99999', id: 3},
      ]
    }
  },
  methods: {
    replaceData() {
      this.list = [
        {text: '22222', id: 4},
        {text: '44444', id: 5},
        {text: '88888', id: 6}
      ]
    }
  }
}
</script>
<style lang="scss">
.item{ background: orange;}
</style>

代碼和上面差不多，只是新增了 id 并綁定到 key 里面，

接下來我們參考上面的流程走一遍看看這次有什么不同之處。

聰明的你已經(jīng)看出來了，刪掉第二條后，點(diǎn)擊調(diào)換數(shù)據(jù) 會(huì)生成新的三條出來，而不是兩條，原理我相信你也懂了，替換數(shù)據(jù)的那批 id 與上一批不一樣，所以 Vue 比較后發(fā)現(xiàn)不同就幫我們生成新的 Dom

以上便是使用 index 和唯一 id 的明顯區(qū)別

另外，像唯一id 不止上面這一種綁定方式，我們也可以在 v-for 里面使用 :key="Math.random()" 生成唯一id，但這種會(huì)有一些細(xì)微的差別，這里筆者就不去舉例了，至于使用哪種 key 可以提升性能方面的相關(guān)知識(shí)不是本章的初衷，讀者可以自行到網(wǎng)上搜索，相信你只要能理解上面這兩種綁定 key 的作用差別在哪里，那么其它的綁定方式對(duì)你來講一定不是難題。