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