摘要

:key 的作用是為 v-for 渲染的每個元素提供一個穩定且唯一的「身分證」，幫助 Vue 在資料變動時，能高效且正確地更新 DOM。

定義與說明

當列表順序改變時，Vue 會利用 key 來識別哪些元素是新增的、哪些是刪除的、哪些只是移動了位置。如果使用不穩定的 index 作為 key，在列表順序改變時，可能導致元素狀態錯亂。因此，key 的值應始終是與資料項綁定的、獨一無二的值（如資料庫 ID）。

錯誤用法

<div v-for="(item, index) in items" :key="index">...</div>

正確用法

<div v-for="item in items" :key="item.id">...</div>

key 是 Vue 高效渲染列表的基石。養成始終使用唯一 ID 作為 key 的習慣，是避免常見渲染錯誤、保證應用程式健壯性的關鍵。

key 屬性唯一標識效能優化