快捷導航

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

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

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

前言

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

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

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

第一種： 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 ，然后還添加一個替換數(shù)據(jù)按鈕事件，我們來看看效果

當我們點擊替換數(shù)據(jù) 這個按鈕時，數(shù)據(jù)變成這樣

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

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

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

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

第二種：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ào)換數(shù)據(jù) 會生成新的三條出來，而不是兩條，原理我相信你也懂了，替換數(shù)據(jù)的那批 id 與上一批不一樣，所以 Vue 比較后發(fā)現(xiàn)不同就幫我們生成新的 Dom

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

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