前端頁面卡死竟然是這個原因？
前言
今天測試提了個bug，打開某個彈窗頁面就卡死了，彈窗也關不掉。明明是個很簡單的頁面，排查居然是列表的key值重復了，看來還是不能相信后端的數據呀。
正確使用key
key 是 Vue 用來唯一標識節點的屬性，當 key 重復時，Vue 的 diff 算法在更新虛擬 DOM 時無法正確區分不同的元素，從而導致頻繁的重繪或錯誤的更新。使用key時需注意：
- 確保 key 唯一：
- 檢查生成 key 的邏輯，確保每個 key 在同一父級內是唯一的。通常使用數據的唯一標識符（如 ID）作為 key。
- 避免使用不穩定的 key：
不要使用像 index 這樣的數組索引作為 key，因為當數組順序改變時，key 不能反映實際元素的變化，導致渲染錯誤。
排查循環結構：
在 v-for 循環中，確保 key 是基于數據的唯一標識，而不是循環中的臨時值。
避免重復：
通過調試工具或者 console.log 打印 key，確保生成的每個 key 都是獨一無二的，防止頁面卡頓。
vue中key的作用是什么
在 Vue 中，key 的主要作用是幫助 Vue 的虛擬 DOM diff 算法更高效地識別和更新元素。具體來說，key 的作用有以下幾點：
- 唯一標識節點：
在使用 v-for 渲染列表時，key 為每個節點提供一個唯一的標識符。這樣 Vue 可以根據這個唯一標識符來判斷節點是否發生了變化，避免不必要的 DOM 更新。
- 優化性能：
有了 key，Vue 不用簡單地按照位置來比較元素，而是根據 key 來追蹤元素。這樣當列表數據發生變化時，Vue 可以高效地復用已有的 DOM 元素，而不是重新渲染整個列表。
確保組件狀態的正確性：
對于帶有狀態的組件，key 能夠保證即使在列表順序發生變化時，每個組件的狀態不會被錯誤地復用或替換。沒有 key 的話，Vue 可能會誤認為兩個不同組件是同一個組件，從而導致狀態混亂。
避免渲染錯誤：
如果 key 值重復，Vue 會無法區分不同的元素，導致渲染異常或出現意外的重繪、卡頓等問題。因此，key 的唯一性非常重要。
key實現原理
Vue 中 key 的實現原理與其虛擬 DOM 的 diff 算法 密切相關。key 主要用于幫助 Vue 在更新階段識別元素的唯一性，確保高效、準確的 DOM 更新。以下是 key 在 Vue 中的具體實現原理：
1. 虛擬 DOM 和 Diff 算法
Vue 通過虛擬 DOM 進行 DOM 的更新優化。當數據發生變化時，Vue 會重新生成一個新的虛擬 DOM，然后將新的虛擬 DOM 與舊的虛擬 DOM 進行對比（diff），找出變化的部分，再將這些變化部分映射到真實的 DOM 上。
2. 沒有 key 的情況
如果你沒有為列表中的元素設置 key，Vue 在進行對比時，會使用一種 基于節點順序 的對比算法。具體來說，它會：
- 按照順序逐個對比舊節點和新節點。
- 當發現節點不同或順序變化時，Vue 可能會復用錯誤的節點，導致錯誤的 DOM 更新。
例如，當列表順序改變時，沒有 key 的情況下 Vue 可能會直接復用錯誤的元素，導致數據和 DOM 不匹配，甚至會丟失組件狀態。
3. 有 key 的情況
當為列表中的元素設置了 key 后，Vue 在執行 diff 算法時，會首先根據 key 來匹配新舊虛擬 DOM 中的節點：
- 精確定位：Vue 會使用 key 來判斷哪些節點是相同的，哪些節點需要更新、刪除或新增。它不會簡單地按位置對比，而是根據 key 來進行 精確定位。
- 避免復用錯誤節點：key 的唯一性確保了 Vue 在處理節點時不會誤復用不同的節點，從而保證了 DOM 和數據的一致性。
4. Diff 算法的優化
Vue 的 diff 算法在對比新舊虛擬 DOM 時分為以下幾步：
- 從頭部對比：從新舊虛擬 DOM 列表的頭部開始比較節點。如果 key 相同，就復用該節點，如果不同，則進行必要的 DOM 操作（比如刪除舊節點或插入新節點）。
- 從尾部對比：如果頭部沒有完全匹配，Vue 還會從尾部開始對比，進一步優化匹配過程。
- 雙指針中間對比：當無法直接匹配時，Vue 會使用 key 來在舊列表中查找新節點的對應元素。如果找到對應的 key，則進行移動、更新；如果沒有，則創建新節點。
5. 為什么 key 唯一性重要
當 key 唯一時，Vue 可以高效地通過 key 進行查找和對比，確保每個元素都能正確更新。如果 key 重復或者缺失，Vue 就無法準確追蹤元素，可能會導致錯誤的節點復用和渲染錯誤，進而導致性能問題或頁面卡頓。
