Vue中為什么不推薦用index做key詳解

更新時(shí)間：2022年09月07日 10:21:06 作者：高志鵬

Vue中使用虛擬dom且根據(jù)diff算法進(jìn)行新舊DOM對(duì)比,從而更新真實(shí) dom,key是虛擬DOM對(duì)象的唯一標(biāo)識(shí),在diff算法中key起著極其重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue中為什么不推薦用index做key的相關(guān)資料,需要的朋友可以參考下

前言

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

尤大的建議說(shuō)白了就是說(shuō)：

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

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

讓我們一起去探討吧

diff算法

簡(jiǎn)單的說(shuō)就是新舊虛擬dom的比較，如果有差異就以新的為準(zhǔn)，然后再插入的真實(shí)的dom中，重新渲染

key的作用

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

舉個(gè)簡(jiǎn)單的例子

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

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

給他們掛個(gè)牌牌，寫上老大、老二、老三。

這樣就不會(huì)認(rèn)錯(cuò)了。key就是這個(gè)作用。

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

Vue 默認(rèn)按照“就地更新”的策略來(lái)更新通過(guò) v-for 渲染的元素列表。當(dāng)數(shù)據(jù)項(xiàng)的順序改變時(shí)，Vue 不會(huì)隨之移動(dòng) DOM 元素的順序，而是就地更新每個(gè)元素，確保它們?cè)谠局付ǖ乃饕恢蒙箱秩尽?/p>

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

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

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

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

效率 & Bug

說(shuō)到這，有些人就是認(rèn)為是簡(jiǎn)單的效率問(wèn)題。

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

答案是否定的

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

但是，使用index帶來(lái)的問(wèn)題卻要麻煩的多

<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);
    }
}