#概覽

• 新增：對(duì)于 v-if/v-else/v-else-if的各分支項(xiàng)key將不再是必須的，因?yàn)楝F(xiàn)在 Vue 會(huì)自動(dòng)生成唯一的key。

• 非兼容：如果你手動(dòng)提供 key，那么每個(gè)分支必須使用唯一的 key。你不能通過故意使用相同的 key 來強(qiáng)制重用分支。

• 非兼容：<template v-for> 的 key 應(yīng)該設(shè)置在 <template> 標(biāo)簽上 (而不是設(shè)置在它的子節(jié)點(diǎn)上)。

#背景

特殊的 key attribute 被用于提示 Vue 的虛擬 DOM 算法來保持對(duì)節(jié)點(diǎn)身份的持續(xù)跟蹤。這樣 Vue 可以知道何時(shí)能夠重用和修補(bǔ)現(xiàn)有節(jié)點(diǎn)，以及何時(shí)需要對(duì)它們重新排序或重新創(chuàng)建。關(guān)于其它更多信息，可以查看以下章節(jié)：

• 列表渲染：維護(hù)狀態(tài)
• API 參考：特殊指令 key

#在條件分支中

Vue 2.x 建議在 v-if/v-else/v-else-if 的分支中使用 key。

<!-- Vue 2.x -->
<div v-if="condition" key="yes">Yes</div>
<div v-else key="no">No</div>

這個(gè)示例在 Vue 3.x 中仍能正常工作。但是我們不再建議在 v-if/v-else/v-else-if 的分支中繼續(xù)使用 key attribute，因?yàn)闆]有為條件分支提供 key 時(shí)，也會(huì)自動(dòng)生成唯一的 key。

<!-- Vue 3.x -->
<div v-if="condition">Yes</div>
<div v-else>No</div>

非兼容變更體現(xiàn)在如果你手動(dòng)提供了 key，那么每個(gè)分支都必須使用一個(gè)唯一的 key。因此大多數(shù)情況下都不需要設(shè)置這些 key。

<!-- Vue 2.x -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="a">No</div>


<!-- Vue 3.x (recommended solution: remove keys) -->
<div v-if="condition">Yes</div>
<div v-else>No</div>


<!-- Vue 3.x (alternate solution: make sure the keys are always unique) -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="b">No</div>

#結(jié)合 <template v-for>

在 Vue 2.x 中 <template> 標(biāo)簽不能擁有 key。不過你可以為其每個(gè)子節(jié)點(diǎn)分別設(shè)置 key。

<!-- Vue 2.x -->
<template v-for="item in list">
  <div :key="item.id">...</div>
  <span :key="item.id">...</span>
</template>

在 Vue 3.x 中 key 則應(yīng)該被設(shè)置在 <template> 標(biāo)簽上。

<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div>...</div>
  <span>...</span>
</template>

類似地，當(dāng)使用 <template v-for> 時(shí)存在使用 v-if 的子節(jié)點(diǎn)，key 應(yīng)改為設(shè)置在 <template> 標(biāo)簽上。

<!-- Vue 2.x -->
<template v-for="item in list">
  <div v-if="item.isVisible" :key="item.id">...</div>
  <span v-else :key="item.id">...</span>
</template>


<!-- Vue 3.x -->
<template v-for="item in list" :key="item.id">
  <div v-if="item.isVisible">...</div>
  <span v-else>...</span>
</template>