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 生效。

迁移策略

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

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