前端頁面卡死竟然是這個原因？

作者：cqhly 2024-09-27 11:38:49

當 key? 唯一時，Vue 可以高效地通過 key? 進行查找和對比，確保每個元素都能正確更新。如果 key 重復或者缺失，Vue 就無法準確追蹤元素，可能會導致錯誤的節(jié)點復用和渲染錯誤，進而導致性能問題或頁面卡頓。

前言

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

key 是 Vue 用來唯一標識節(jié)點的屬性，當 key 重復時，Vue 的 diff 算法在更新虛擬 DOM 時無法正確區(qū)分不同的元素，從而導致頻繁的重繪或錯誤的更新。使用key時需注意：

在 Vue 中，key 的主要作用是幫助 Vue 的虛擬 DOM diff 算法更高效地識別和更新元素。具體來說，key 的作用有以下幾點：

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

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

對于帶有狀態(tài)的組件，key 能夠保證即使在列表順序發(fā)生變化時，每個組件的狀態(tài)不會被錯誤地復用或替換。沒有 key 的話，Vue 可能會誤認為兩個不同組件是同一個組件，從而導致狀態(tài)混亂。

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

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

如果你沒有為列表中的元素設置 key，Vue 在進行對比時，會使用一種基于節(jié)點順序的對比算法。具體來說，它會：

例如，當列表順序改變時，沒有 key 的情況下 Vue 可能會直接復用錯誤的元素，導致數(shù)據(jù)和 DOM 不匹配，甚至會丟失組件狀態(tài)。

當為列表中的元素設置了 key 后，Vue 在執(zhí)行 diff 算法時，會首先根據(jù) key 來匹配新舊虛擬 DOM 中的節(jié)點：

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

Vue 的 diff 算法在對比新舊虛擬 DOM 時分為以下幾步：

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

當 key 唯一時，Vue 可以高效地通過 key 進行查找和對比，確保每個元素都能正確更新。如果 key 重復或者缺失，Vue 就無法準確追蹤元素，可能會導致錯誤的節(jié)點復用和渲染錯誤，進而導致性能問題或頁面卡頓。

責任編輯：武曉燕來源：海燕技術棧