vue3 key Attribute 的变化vue3 key Attribute 的变化目录 [TOC] key At

vue3 key Attribute 的变化

[TOC]

key Attribute

为啥VUE3key的可以写在Tempale

vue3中的 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>

vue3 key Attribute 的变化