Vue 的 key 属性

原创已于 2024-12-29 17:11:25 修改 · 1.4k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-12-23 20:27:23 首次发布

6 篇文章

订阅专栏

在 Vue.js 中，key 属性是一个特殊的属性，主要用于帮助 Vue 更高效地更新 DOM 节点。它在虚拟 DOM 的差分算法中扮演着重要角色，通常与列表渲染 (v-for) 或条件渲染 (v-if) 一起使用。以下是对 key 属性的详细介绍：

1. `key` 属性的作用

key 的主要作用是唯一标识虚拟 DOM 节点。当 Vue 进行虚拟 DOM 比较时，利用 key 来判断节点是否发生变化，从而决定是复用现有节点还是创建新的节点。

在 v-for 中，key 帮助 Vue 精确定位每个列表项。没有 key 时，Vue 会尽量复用现有 DOM 节点，可能导致渲染错误或状态错乱。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

在上面的代码中，key 的值是 item.id，确保每个 li 元素都可以被唯一标识。如果 items 中的顺序发生变化，Vue 能根据 key 高效更新 DOM。

在使用 v-if 或 v-else 时，key 能确保切换组件或元素时重新渲染，而不是简单地复用之前的 DOM。

<template>
  <div>
    <component :is="currentComponent" :key="currentComponent"></component>
  </div>
</template>

在这里，每次 currentComponent 变化时，Vue 会销毁旧的组件实例并创建新的组件实例。

Vue 默认会尝试复用已有的 DOM 节点，而不是销毁并重新创建节点。如果没有 key，在某些情况下可能会导致意料之外的行为。例如：

<template>
  <div>
    <input v-for="item in items" :value="item.text">
  </div>
</template>

如果 items 发生变化，输入框的内容可能不会按预期更新，因为 Vue 会复用 DOM 节点。通过添加 key：

<template>
  <div>
    <input v-for="item in items" :key="item.id" :value="item.text">
  </div>
</template>

这样，Vue 可以精确地映射每个输入框到正确的 item。

在没有 key 的情况下，Vue 会假定数组中的每个元素只是在位置上发生了变化，从而直接修改 DOM。但如果实际是插入或删除了某些项，DOM 的更新会出现错位。

<template>
  <ul>
    <li v-for="item in items">{{ item.text }}</li>
  </ul>
</template>

如果 items 发生插入操作，Vue 可能直接替换已有 DOM 节点的内容，而不是创建新的节点。通过使用 key，Vue 能够正确插入新节点，而不是覆盖原有内容。

推荐：

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

避免：

<li v-for="item in items" :key="Math.random()">{{ item.text }}</li>

Math.random() 会导致每次渲染都生成新的 key，Vue 无法正确复用节点，性能会受到影响。

如果在 v-for 中没有提供 key，Vue 会给出警告：

[Vue warn]: Each child in a list should have a unique "key" prop.

如果多个列表项的 key 值重复，Vue 可能会错误地复用节点，导致渲染错误。

<template>
  <ul>
    <li v-for="item in items" :key="item.name">{{ item.text }}</li>
  </ul>
</template>

如果 item.name 可能重复，应该改用唯一的标识符。

使用唯一的标识符：优先选择每个列表项的 id。
避免使用索引：
```
<li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
```
使用索引作为 key 可能导致问题，尤其是在列表项增删时。因为索引会随位置变化，而无法正确映射到数据项。
保证稳定性：确保数据的 key 值不会频繁变化，以避免不必要的 DOM 操作。