Question

• 新增：对于 v-if / v-else / v-else-if 的各分支项 key 将不再是必须的，因为现在 Vue 会自动生成唯一的 key
  • 非兼容：如果你手动提供 key ，那么每个分支必须使用唯一的 key 。你将不再能通过故意使用相同的 key 来强制重用分支。
• 非兼容： <template v-for> 的 key 应该设置在 <template> 标签上 (而不是设置在它的子节点上)。

在条件分支中

在 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 的分支中继续使用 key attribute，因为没有为条件分支提供 key 时，也会自动生成唯一的 key 。非兼容变更体现在如果你手动提供了 key ，那么每个分支都必须使用一个唯一的 key 。

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

<template v-for>

Vue 2.x

<template> 标签不能拥有 key 。不过，你可以为其每个子节点分别设置 key 。

<!-- Vue 2.x -->
<template v-for="item in list">
  <div :key="'heading-' + item.id">...</div>
  <span :key="'content-' + item.id">...</span>
</template>
<!-- 使用 v-if -->
<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

key 则应该被设置在 <template> 标签上。

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