vue3 key Attribute 的变化

2023-12-31 15:48:47

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

迁移策略

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

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

文章来源:https://blog.csdn.net/qq_63358859/article/details/135315914
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。