前言

今天測(cè)試提了個(gè)bug，打開(kāi)某個(gè)彈窗頁(yè)面就卡死了，彈窗也關(guān)不掉。明明是個(gè)很簡(jiǎn)單的頁(yè)面，排查居然是列表的key值重復(fù)了，看來(lái)還是不能相信后端的數(shù)據(jù)呀。

正確使用key

key 是 Vue 用來(lái)唯一標(biāo)識(shí)節(jié)點(diǎn)的屬性，當(dāng) key 重復(fù)時(shí)，Vue 的 diff 算法在更新虛擬 DOM 時(shí)無(wú)法正確區(qū)分不同的元素，從而導(dǎo)致頻繁的重繪或錯(cuò)誤的更新。使用key時(shí)需注意：

1. 確保 key 唯一：

• 檢查生成 key 的邏輯，確保每個(gè) key 在同一父級(jí)內(nèi)是唯一的。通常使用數(shù)據(jù)的唯一標(biāo)識(shí)符（如 ID）作為 key。

2. 避免使用不穩(wěn)定的 key：

• 不要使用像 index 這樣的數(shù)組索引作為 key，因?yàn)楫?dāng)數(shù)組順序改變時(shí)，key 不能反映實(shí)際元素的變化，導(dǎo)致渲染錯(cuò)誤。

3. 排查循環(huán)結(jié)構(gòu)：

• 在 v-for 循環(huán)中，確保 key 是基于數(shù)據(jù)的唯一標(biāo)識(shí)，而不是循環(huán)中的臨時(shí)值。

4. 避免重復(fù)：

• 通過(guò)調(diào)試工具或者 console.log 打印 key，確保生成的每個(gè) key 都是獨(dú)一無(wú)二的，防止頁(yè)面卡頓。

vue中key的作用是什么

在 Vue 中，key 的主要作用是幫助 Vue 的虛擬 DOM diff 算法更高效地識(shí)別和更新元素。具體來(lái)說(shuō)，key 的作用有以下幾點(diǎn)：

1. 唯一標(biāo)識(shí)節(jié)點(diǎn)：

在使用 v-for 渲染列表時(shí)，key 為每個(gè)節(jié)點(diǎn)提供一個(gè)唯一的標(biāo)識(shí)符。這樣 Vue 可以根據(jù)這個(gè)唯一標(biāo)識(shí)符來(lái)判斷節(jié)點(diǎn)是否發(fā)生了變化，避免不必要的 DOM 更新。

2. 優(yōu)化性能：

• 有了 key，Vue 不用簡(jiǎn)單地按照位置來(lái)比較元素，而是根據(jù) key 來(lái)追蹤元素。這樣當(dāng)列表數(shù)據(jù)發(fā)生變化時(shí)，Vue 可以高效地復(fù)用已有的 DOM 元素，而不是重新渲染整個(gè)列表。

3. 確保組件狀態(tài)的正確性：

• 對(duì)于帶有狀態(tài)的組件，key 能夠保證即使在列表順序發(fā)生變化時(shí)，每個(gè)組件的狀態(tài)不會(huì)被錯(cuò)誤地復(fù)用或替換。沒(méi)有 key 的話，Vue 可能會(huì)誤認(rèn)為兩個(gè)不同組件是同一個(gè)組件，從而導(dǎo)致?tīng)顟B(tài)混亂。

4. 避免渲染錯(cuò)誤：

• 如果 key 值重復(fù)，Vue 會(huì)無(wú)法區(qū)分不同的元素，導(dǎo)致渲染異?；虺霈F(xiàn)意外的重繪、卡頓等問(wèn)題。因此，key 的唯一性非常重要。

key實(shí)現(xiàn)原理

Vue 中 key 的實(shí)現(xiàn)原理與其虛擬 DOM 的 diff 算法 密切相關(guān)。key 主要用于幫助 Vue 在更新階段識(shí)別元素的唯一性，確保高效、準(zhǔn)確的 DOM 更新。以下是 key 在 Vue 中的具體實(shí)現(xiàn)原理：

1. 虛擬 DOM 和 Diff 算法

Vue 通過(guò)虛擬 DOM 進(jìn)行 DOM 的更新優(yōu)化。當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue 會(huì)重新生成一個(gè)新的虛擬 DOM，然后將新的虛擬 DOM 與舊的虛擬 DOM 進(jìn)行對(duì)比（diff），找出變化的部分，再將這些變化部分映射到真實(shí)的 DOM 上。

2. 沒(méi)有 key 的情況

如果你沒(méi)有為列表中的元素設(shè)置 key，Vue 在進(jìn)行對(duì)比時(shí)，會(huì)使用一種 基于節(jié)點(diǎn)順序 的對(duì)比算法。具體來(lái)說(shuō)，它會(huì)：

• 按照順序逐個(gè)對(duì)比舊節(jié)點(diǎn)和新節(jié)點(diǎn)。
• 當(dāng)發(fā)現(xiàn)節(jié)點(diǎn)不同或順序變化時(shí)，Vue 可能會(huì)復(fù)用錯(cuò)誤的節(jié)點(diǎn)，導(dǎo)致錯(cuò)誤的 DOM 更新。

例如，當(dāng)列表順序改變時(shí)，沒(méi)有 key 的情況下 Vue 可能會(huì)直接復(fù)用錯(cuò)誤的元素，導(dǎo)致數(shù)據(jù)和 DOM 不匹配，甚至?xí)G失組件狀態(tài)。

3. 有 key 的情況

當(dāng)為列表中的元素設(shè)置了 key 后，Vue 在執(zhí)行 diff 算法時(shí)，會(huì)首先根據(jù) key 來(lái)匹配新舊虛擬 DOM 中的節(jié)點(diǎn)：

• 精確定位：Vue 會(huì)使用 key 來(lái)判斷哪些節(jié)點(diǎn)是相同的，哪些節(jié)點(diǎn)需要更新、刪除或新增。它不會(huì)簡(jiǎn)單地按位置對(duì)比，而是根據(jù) key 來(lái)進(jìn)行 精確定位。
• 避免復(fù)用錯(cuò)誤節(jié)點(diǎn)：key 的唯一性確保了 Vue 在處理節(jié)點(diǎn)時(shí)不會(huì)誤復(fù)用不同的節(jié)點(diǎn)，從而保證了 DOM 和數(shù)據(jù)的一致性。

4. Diff 算法的優(yōu)化

Vue 的 diff 算法在對(duì)比新舊虛擬 DOM 時(shí)分為以下幾步：

• 從頭部對(duì)比：從新舊虛擬 DOM 列表的頭部開(kāi)始比較節(jié)點(diǎn)。如果 key 相同，就復(fù)用該節(jié)點(diǎn)，如果不同，則進(jìn)行必要的 DOM 操作（比如刪除舊節(jié)點(diǎn)或插入新節(jié)點(diǎn)）。
• 從尾部對(duì)比：如果頭部沒(méi)有完全匹配，Vue 還會(huì)從尾部開(kāi)始對(duì)比，進(jìn)一步優(yōu)化匹配過(guò)程。
• 雙指針中間對(duì)比：當(dāng)無(wú)法直接匹配時(shí)，Vue 會(huì)使用 key 來(lái)在舊列表中查找新節(jié)點(diǎn)的對(duì)應(yīng)元素。如果找到對(duì)應(yīng)的 key，則進(jìn)行移動(dòng)、更新；如果沒(méi)有，則創(chuàng)建新節(jié)點(diǎn)。

5. 為什么 key 唯一性重要

當(dāng) key 唯一時(shí)，Vue 可以高效地通過(guò) key 進(jìn)行查找和對(duì)比，確保每個(gè)元素都能正確更新。如果 key 重復(fù)或者缺失，Vue 就無(wú)法準(zhǔn)確追蹤元素，可能會(huì)導(dǎo)致錯(cuò)誤的節(jié)點(diǎn)復(fù)用和渲染錯(cuò)誤，進(jìn)而導(dǎo)致性能問(wèn)題或頁(yè)面卡頓。