Vue 3.0 key attribute

#概覽

• 新增：對于 v-if/v-else/v-else-if的各分支項key將不再是必須的，因為現(xiàn)在 Vue 會自動生成唯一的key。

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

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

#背景

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

• 列表渲染：維護狀態(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>

這個示例在 Vue 3.x 中仍能正常工作。但是我們不再建議在 v-if/v-else/v-else-if 的分支中繼續(xù)使用 key attribute，因為沒有為條件分支提供 key 時，也會自動生成唯一的 key。

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

非兼容變更體現(xiàn)在如果你手動提供了 key，那么每個分支都必須使用一個唯一的 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。不過你可以為其每個子節(jié)點分別設(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> 時存在使用 v-if 的子節(jié)點，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>