大家好，我是[晚风依旧似温柔]，新人一枚，欢迎大家关注~

本文目录：

`v-for` 中为什么需要加 `key`？1. `key` 的作用

2. 优化虚拟 DOM 的重渲染2.1 没有 `key` 时的渲染过程2.2 有 `key` 时的渲染过程

3. `key` 的具体作用3.1 示例：没有 `key` 时的问题3.2 示例：使用 `key` 优化性能

4. 使用 `key` 时的注意事项5. 总结

v-for 中为什么需要加 key？

在 Vue.js 中，当我们使用 v-for 指令渲染列表时，Vue 会根据数据的变化重新渲染 DOM。如果不提供 key，Vue 会依赖 DOM 元素的顺序来决定哪些元素需要更新、添加或删除。然而，这种做法存在一些性能和更新的隐患，特别是在列表项的顺序发生变化时。为了优化这类操作，key 在 v-for 中显得尤为重要。

1. key 的作用

key 是 v-for 中的一个属性，用于给每个被渲染的元素指定一个唯一的标识符。Vue 会利用这个唯一的标识符来高效地判断哪些 DOM 元素需要被复用或重新渲染。

具体来说，key 的作用有以下几个方面：

2. 优化虚拟 DOM 的重渲染

在 Vue 中，组件的渲染是通过 虚拟 DOM 来实现的。虚拟 DOM 会对比前后的差异，并只更新发生变化的部分。key 属性告诉 Vue 哪些元素发生了变化，从而 优化虚拟 DOM diff 算法，提高渲染效率。

2.1 没有 key 时的渲染过程

假设我们渲染一个简单的列表：

• {{ item.text }}

如果 items 数组发生变化（例如元素顺序改变、添加或删除元素），Vue 会默认通过 顺序 来判断哪些元素需要更新。这时 Vue 会逐一比较当前元素与之前的元素，根据顺序决定哪些元素需要被复用或删除。这样做可能会造成不必要的 DOM 更新或丢失动画效果，特别是当列表项发生位置变动时。

2.2 有 key 时的渲染过程

当我们为每个列表项指定了 key，Vue 会利用 key 来确保每个元素都有唯一标识。即使列表的顺序发生变化，Vue 也能 精确地复用已存在的 DOM 元素，而不是重新渲染整个列表。

• {{ item.text }}

在这个例子中，key 使用了 item.id 作为唯一标识符。这样即使列表的顺序发生变化，Vue 也会根据 key 的值来 高效地重新排序 DOM 元素，而不是完全重新渲染每个列表项。

3. key 的具体作用

提高渲染性能：通过明确标识每个列表项，key 帮助 Vue 减少不必要的 DOM 操作，避免频繁的元素重渲染。

复用 DOM 元素：当列表顺序发生变化时，Vue 会通过 key 精确地找到对应的 DOM 元素进行复用，而不是重新创建新的 DOM 元素。

确保组件状态正确：如果列表中的项是组件，使用 key 可以确保组件的状态保持一致，不会因为顺序变化而丢失或混乱状态。

3.1 示例：没有 key 时的问题

假设我们有以下代码和数据：

• {{ item.text }}

data() {

return {

items: [

{ text: 'Item 1' },

{ text: 'Item 2' },

{ text: 'Item 3' }

]

};

}

如果我们对 items 数组进行修改，比如交换两个元素的位置：

this.items = [

{ text: 'Item 3' },

{ text: 'Item 2' },

{ text: 'Item 1' }

];

Vue 会默认根据 顺序 来重新渲染 DOM。这时，即使 Item 3 和 Item 1 的内容没变，Vue 也会删除原本 Item 3 的 DOM 元素并重新渲染它，这会浪费性能。

3.2 示例：使用 key 优化性能

• {{ item.text }}

在这个例子中，我们使用 item.text 作为 key。当列表发生变化时，Vue 能根据 key 精确定位到每个列表项，避免了不必要的 DOM 操作。

this.items = [

{ text: 'Item 3' },

{ text: 'Item 2' },

{ text: 'Item 1' }

];

通过这种方式，即使列表的顺序改变了，Vue 也能通过 key 来确定每个元素的位置，确保旧的 DOM 元素能够得到复用，提高性能。

4. 使用 key 时的注意事项

唯一性：key 必须是唯一的。对于列表中的每一项，key 应该是唯一的且稳定的，不能基于索引（index）等可变值，否则可能会导致错误的 DOM 更新。

不要使用索引作为 key：虽然使用数组的索引作为 key 是可行的，但这样做会在数据发生变化时导致性能问题和潜在的 bug。特别是当列表项被删除或重新排序时，索引不再能保持唯一性，导致 Vue 无法正确复用 DOM 元素。

{{ item.text }}

5. 总结

key 是 Vue 渲染列表时用来优化性能的一个关键属性。使用 key 可以帮助 Vue 高效地复用和更新 DOM 元素，避免了不必要的重渲染，特别是在列表项的顺序发生变化时。key 应该是 唯一且稳定 的，避免使用可变的值（如索引）作为 key，以确保列表渲染的正确性和性能优化。

通过合理使用 key，你可以显著提高应用在渲染大规模列表时的性能，并避免潜在的 UI 错误。

如果觉得有帮助，别忘了点个赞+关注支持一下~ 喜欢记得关注，别让好内容被埋没～