一、key 屬性的核心作用
在 Vue 中，key是一個特殊的屬性，主要用于協助 Vue 的虛擬 DOM（Virtual DOM）算法高效地更新實際 DOM。它的核心作用可以概括為：
- 唯一標識節點：為每個節點提供一個唯一的身份標識
- 優化 Diff 算法：幫助 Vue 準確判斷兩個節點是否為同一節點(如for循環遍歷綁定key)
- 維持狀態：在節點更新時保留組件狀態
二、虛擬 DOM 與 Diff 算法的工作原理
要理解 key 的作用，必須先了解 Vue 的虛擬 DOM 和 Diff 算法機制：
-
虛擬 DOM 的本質
虛擬 DOM 是真實 DOM 的 JavaScript 對象映射，當數據變化時，Vue 會先更新虛擬 DOM，再通過 Diff 算法計算出最小更新量，最后更新真實 DOM。 -
Diff 算法的核心策略
Vue 的 Diff 算法采用 "同層比較" 策略，遵循以下規則：- 只對比同一層級的節點
- 先檢查節點類型，再檢查 key 值
- 當節點類型或 key 不同時，認為是不同節點
-
節點類型與 key 的判斷邏輯
// 簡化的節點對比
)
