key 属性

重大变更

概述

• 新增: key 在 v-if/v-else/v-else-if 分支中不再是必需的，因为 Vue 现在会自动生成唯一的 key。
  • 重大变更: 如果您手动提供 key，则每个分支都必须使用唯一的 key。您不能再故意使用相同的 key 来强制分支重用。
• 重大变更: <template v-for> key 应该放在 <template> 标签上（而不是它的子元素上）。

背景

key 特殊属性用作 Vue 虚拟 DOM 算法的提示，用于跟踪节点的身份。这样，Vue 就可以知道何时可以重用和修补现有节点，以及何时需要重新排序或重新创建它们。有关更多信息，请参阅以下部分

• 列表渲染：维护状态
• 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 分支上使用 key 属性，因为如果您不提供它们，现在会在条件分支上自动生成唯一的 key。

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

重大变更在于，如果您手动提供 key，则每个分支都必须使用唯一的 key。在大多数情况下，您可以删除这些 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>

使用 <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>

在 Vue 3.x 中，key 应该放在 <template> 标签上。

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

类似地，当使用 <template v-for> 以及使用 v-if 的子元素时，key 应该向上移动到 <template> 标签上。

<!-- 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>