前言

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

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

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

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

讓我們一起去探討吧

diff算法

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

key的作用

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

舉個(gè)簡單的例子

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

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

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

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

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

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

默認(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：

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

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

效率 & Bug

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

確實(shí)：設(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);
    }
}

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

總結(jié)

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

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

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

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

最新評(píng)論