vue3 key Attribute 的变化

key?Attribute

为啥VUE3key的可以写在Tempale?

vue 3中的key属性可以在模板中直接使用的原因是Vue 3对模板编译进行了优化，使得模板中的静态节点可以被标记并跳过不必要的更新操作。在Vue 3中，key属性被用于标识列表中的每个节点，以便在列表发生变化时，Vue 可以更高效地更新和重用节点。

相比之下，Vue 2中的模板编译方式不同，模板中的所有内容都会参与渲染过程，包括静态节点。因此，在Vue 2中，将key属性直接写在模板中是没有意义的，因为模板中的内容会被完全渲染。

总结来说，Vue 3对模板编译进行了优化，使得模板中的静态节点可以被跳过不必要的更新操作，而Vue 2中的模板编译方式不支持这种优化。所以，在Vue 3中，你可以将key属性写在模板中，而在Vue 2中则不可以。

在Vue 3中，模板编译器会对模板进行静态分析，将模板中的静态节点和动态节点分开处理。静态节点是指在编译时就已经确定的节点，例如纯文本、静态标签等，而动态节点是指需要在运行时才能确定的节点，例如表达式、指令等。

对于静态节点，Vue 3会将它们标记为“hoisted”，即将它们提升到渲染函数的外部，避免在每次渲染时都重新创建这些节点。这样可以大大提高渲染性能。

在列表渲染中，Vue 3会根据key属性的值来判断列表中的每个节点是否发生了变化。如果两个节点的key值相同，Vue 会认为它们是同一个节点，直接复用旧节点，避免重新创建和销毁节点，提高渲染性能。

因此，在Vue 3中，将key属性写在模板中是有意义的，因为模板中的静态节点可以被标记并跳过不必要的更新操作，而key属性可以用于标识列表中的每个节点，以便在列表发生变化时，Vue 可以更高效地更新和重用节点。

相比之下，在Vue 2中，模板中的所有内容都会参与渲染过程，包括静态节点。因此，在Vue 2中，将key属性直接写在模板中是没有意义的，因为模板中的内容会被完全渲染。

概览

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

背景

特殊的?key?attribute 被作为 Vue 的虚拟 DOM 算法的提示，以保持对节点身份的持续跟踪。这样 Vue 就可以知道何时能够重用和修补现有节点，以及何时需要对它们重新排序或重新创建。关于其它更多信息，可以查看以下章节：

通过 key 管理状态?

Vue 默认按照“就地更新”的策略来更新通过?v-for?渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的?key?attribute：

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

当你使用?<template v-for>?时，key?应该被放置在这个?<template>?容器上：

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

注意

key?在这里是一个通过?v-bind?绑定的特殊 attribute。请不要和在?v-for?中使用对象里所提到的对象属性名相混淆。

推荐在任何可行的时候为?v-for?提供一个?key?attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

key?绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为?v-for?的 key。关于?key?attribute 的更多用途细节，请参阅?key?API 文档。

key?

key?这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。

• 预期：number | string | symbol

• 详细信息

  在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。

  同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。

  最常见的用例是与?v-for?结合?

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用：

• 在适当的时候触发组件的生命周期钩子
• 触发过渡

举例来说：

<transition>
  <span :key="text">{{ text }}</span>
</transition>

当?text?变化时，<span>?总是会被替换而不是更新，因此 transition 将会被触发

在条件分支中

在 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。

<!-- 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 (推荐方案：移除 key) -->
<div v-if="condition">Yes</div>
<div v-else>No</div>

<!-- Vue 3.x (替代方案：确保 key 始终是唯一的) -->
<div v-if="condition" key="a">Yes</div>
<div v-else key="b">No</div>

结合?<template v-for>

在 Vue 2.x 中，<template>?标签不能拥有?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>

v-if 与 v-for 的优先级对比?

概览

• 非兼容：两者作用于同一个元素上时，v-if?会拥有比?v-for?更高的优先级。

介绍

Vue.js 中使用最多的两个指令就是?v-if?和?v-for，因此开发者们可能会想要同时使用它们。虽然不建议这样做，但有时确实是必须的，于是我们想提供有关其工作方式的指南。

2.x 语法

2.x 版本中在一个元素上同时使用?v-if?和?v-for?时，v-for?会优先作用。

3.x 语法

3.x 版本中?v-if?总是优先于?v-for?生效。

迁移策略

由于语法上存在歧义，建议避免在同一元素上同时使用两者。

比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。