前言

尤大在vue 2.x的文檔中明確指出：建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。

尤大的建議說白了就是說：

如果index可以做key，那直接底層幫你傳進去好了，又何必讓你們多此一舉呢？乖乖的不要用index做key

那么:key 到底有什么用？ 當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用就地復(fù)用策略 。 這句話是什么意思？

讓我們一起去探討吧

diff算法

簡單的說就是新舊虛擬dom的比較，如果有差異就以新的為準，然后再插入的真實的dom中，重新渲染

key的作用

一句話： key的作用主要是為了更高效的對比虛擬DOM中每個節(jié)點是否是相同節(jié)點;

舉個簡單的例子

三胞胎戰(zhàn)成一排，你怎么知道誰是老大？

如果老大皮了一下子，和老三換了一下位置，你又如何區(qū)分出來？

給他們掛個牌牌，寫上老大、老二、老三。

這樣就不會認錯了。key就是這個作用。

通過 key 管理狀態(tài)

Vue 默認按照“就地更新”的策略來更新通過 v-for 渲染的元素列表。當數(shù)據(jù)項的順序改變時，Vue 不會隨之移動 DOM 元素的順序，而是就地更新每個元素，確保它們在原本指定的索引位置上渲染。

默認模式是高效的，但只適用于列表渲染輸出的結(jié)果不依賴子組件狀態(tài)或者臨時 DOM 狀態(tài) (例如表單輸入值) 的情況。

為了給 Vue 一個提示，以便它可以跟蹤每個節(jié)點的標識，從而重用和重新排序現(xiàn)有的元素，你需要為每個元素對應(yīng)的塊提供一個唯一的 key attribute：

在沒有 key 的情況下，Vue 將使用一種最小化元素移動的算法，并盡可能地就地更新/復(fù)用相同類型的元素。如果傳了 key，則將根據(jù) key 的變化順序來重新排列元素，并且將始終移除/銷毀 key 已經(jīng)不存在的元素。

同一個父元素下的子元素必須具有唯一的 key。重復(fù)的 key 將會導(dǎo)致渲染異常

效率 & Bug

說到這，有些人就是認為是簡單的效率問題。

確實：設(shè)置key可以讓diff更高效，但僅僅是重繪重排嗎？

答案是否定的

如果僅僅是效率低下，在操作極少的元素中，也無傷大雅。

但是，使用index帶來的問題卻要麻煩的多

<div id="app">
    <Child v-for="item,i in array" :text="item" @delete="remove(i)"/>
</div>

data() {
    return {
      array: [1, 2, 3]
    };
},
methods: {
    remove(i) {
      this.array.splice(i, 1);
    }
}

此時，key的作用就是為了復(fù)用。正是因為會復(fù)用，所以用index來做key會出現(xiàn)復(fù)用錯誤的問題, 造成意想不到的bug

總結(jié)

最簡單方便的就是：使用數(shù)據(jù)庫中的 id

如果返回值中沒有id怎么辦

• 創(chuàng)建一個自增id函數(shù)，每次調(diào)用自增一
• 使用uuid庫

到此這篇關(guān)于Vue中為什么不推薦用index做key的文章就介紹到這了,更多相關(guān)Vue不推薦用index做key內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論