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来强制重用分支。
- 非兼容：如果你手动提供
- 非兼容：
的key应该设置在标签上 (而不是设置在它的子节点上)。
背景
特殊的 key attribute 被作为 Vue 的虚拟 DOM 算法的提示，以保持对节点身份的持续跟踪。这样 Vue 就可以知道何时能够重用和修补现有节点，以及何时需要对它们重新排序或重新创建。关于其它更多信息，可以查看以下章节：
通过 key 管理状态
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。
为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute：
当你使用 时，key 应该被放置在这个 容器上：
{{ todo.name }}
注意
key在这里是一个通过v-bind绑定的特殊 attribute。请不要和在 v-for 中使用对象里所提到的对象属性名相混淆。推荐在任何可行的时候为
v-for提供一个keyattribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。
key绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为v-for的 key。关于keyattribute 的更多用途细节，请参阅 key API 文档。
key
key 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。
-
预期：
number | string | symbol -
详细信息
在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。
同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。
最常见的用例是与
v-for结合
- ...
也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用：
- 在适当的时候触发组件的生命周期钩子
- 触发过渡
举例来说：
{{ text }}
当 text 变化时， 总是会被替换而不是更新，因此 transition 将会被触发
在条件分支中
在 Vue 2.x 中，建议在 v-if/v-else/v-else-if 的分支中使用 key。
Yes
No
这个示例在 Vue 3.x 中仍能正常工作。但是我们不再建议在 v-if/v-else/v-else-if 的分支中继续使用 key attribute，因为没有为条件分支提供 key 时，也会自动生成唯一的 key。
Yes
No
非兼容变更体现在如果你手动提供了 key，那么每个分支都必须使用一个唯一的 key。因此大多数情况下都不需要设置这些 key。
Yes
No
Yes
No
Yes
No
结合
在 Vue 2.x 中， 标签不能拥有 key。不过，你可以为其每个子节点分别设置
...
...
在 Vue 3.x 中，key 则应该被设置在 标签上。
...
...
类似地，当使用 时如果存在使用 v-if 的子节点，则 key 应改为设置在 标签上。
...
...
...
...
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 生效。
迁移策略
由于语法上存在歧义，建议避免在同一元素上同时使用两者。
比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。