vue 中的 key 屬性用于唯一標識列表元素，幫助 vue 追蹤元素身份、正確更新 dom、優化性能和避免不必要的重新渲染。使用規則包括：每個元素必須具有唯一穩定的字符串、數字或符號 key；對象列表可以使用 id 屬性作為 key，數組列表可以使用但盡量避免使用索引作為 key。
Vue 中 key 的作用
在 Vue 中，key 屬性是一個特殊屬性，用于唯一標識列表中的每個項目元素。其主要目的是優化虛擬 DOM 的渲染過程，提高性能和效率。
何時使用 key
在以下情況下，使用 key 至關重要：
當列表中的元素具有動態變化的順序或內容時。
當列表中的元素需要被跟蹤或更新時。
當列表中的元素包含可交互的組件或子元素時。
key 的作用
key 屬性的作用如下：
幫助 Vue 追蹤列表元素的身份，即使它們在數據中重新排序或更新。
確保在元素更新時 Vue 能夠正確地更新 DOM。
避免不必要的 DOM 重新渲染，從而優化性能。
在條件渲染或循環內，key 還可以幫助 Vue 區分不同的子組件。
如何使用 key
在列表中使用 key 時，需要遵循以下規則：
每個列表元素都必須具有唯一且穩定的 key。
key 值應該是一個字符串、數字或符號，但不能是布爾值或對象。
對于對象列表，通常使用對象的 id 屬性作為 key。
對于數組列表，可以使用數組索引作為 key，但這不推薦，因為數組索引可能會發生變化。
示例
以下代碼段演示了如何使用 key：
<code class="html"><template><ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul></template></code>
登錄后復制
在這個例子中，items 是一個對象數組，每個對象都有一個唯一的 id 屬性。Vue 將使用此 id 屬性作為 key，以跟蹤列表中每個元素的身份。
