vue中v-for指令的key值可以是index嗎

本篇內容介紹了“vue中v-for指令的key值可以是index嗎”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

為什么 v-for 的 key 值不能是 index？

來看一下我的線上bug演示吧：

父組件代碼
<Child
  v-for="(item, index) in list"
  :key="index"
  :count="item.count"
  :name="item.name"
  @delete="handleDelete(index)"
/>

list: [
    {
      count: 1,
      name: '第1個元素'
    },
    {
      count: 2,
      name: '第2個元素'
    },
    {
      count: 3,
      name: '第3個元素'
    }
  ]
  
handleDelete(index) {
  this.list.splice(index, 1)
},

等一下，第三個元素的count值居然變成了2，wtf！！！

驚得我又去看了遍子組件的代碼

子組件
<div>
  <span>{{ name }}</span>
  count值為：{{ innerCount }}
  <button @click="$emit('delete')">-</button>
</div>

props: {
  count: {
    type: Number,
    default: 0
  },
  name: {
    type: String,
    default: ''
  }
},
data() {
  return {
    innerCount: this.count
  } 
}

感覺也沒什么不對的啊。

不信邪，我又多創建了點元素來刪除，還試了下排序：果然，不光刪除元素有問題，排序也有問題。

把 key 值改成 item.name 再試一下。

<Child
  v-for="(item, index) in list"
  :key="item.name"
  :count="item.count"
  :name="item.name"
  @delete="handleDelete(index)"
/>

正常了。

這樣看來，在 v-for 里把 key 值寫成 index，非常危險啊。

在查閱了 vue 官方文檔之后，我終于明白了原因：

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染。

這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

不依賴子組件狀態

子組件里有一行很關鍵的代碼

data() {
  return {
    innerCount: this.count
  } 
}

子組件內部定義了 innerCount，這樣子組件就有了自己的狀態，按照官方文檔的說明，這種情況下不能把 index 作為 key 值。

臨時 DOM 狀態

<div v-for="(item, index) in list1" :key="index">
  <input type="text" />
  <button @click="delClick(index)">刪除</button>
</div>

刪除了第2項，但是第3項在表單中的3變成了2，跟上面依賴子組件狀態的例子是一樣的。

“vue中v-for指令的key值可以是index嗎”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！