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">替換數據</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 數組，並將 index 作為 key ，然后還添加一個替換數據按鈕事件，我們來看看效果

當我們點擊替換數據 這個按鈕時，數據變成這樣

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

現在僅剩下 33333 和 99999，此時我們去點擊替換數據 看看有什么效果

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

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

第二種：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">替換數據</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 里面，
接下來我們參考上面的流程走一遍看看這次有什么不同之處。

聰明的你已經看出來了，刪掉第二條后，點擊調換數據 會生成新的三條出來，而不是兩條，原理我相信你也懂了，替換數據的那批 id 與上一批不一樣，所以 Vue 比較后發現不同就幫我們生成新的 Dom

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

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

喜歡本篇文章的話請來個小贊贊哈，歡迎有問題的小伙伴到下方留言。