千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

v-for中key的作用：

在 Vue.js 中，key 是一个特殊的属性，用于在使用 v-for 进行列表渲染时，为每个项目提供唯一的标识。key 的作用主要有以下几个方面：

1.提高性能：当 Vue.js 更新列表时，它会尽可能地重用已有的 DOM 元素，而不是重新创建和销毁元素。通过为每个项目设置唯一的 key，Vue.js 可以基于 key 的变化来决定元素如何更新，从而提升性能。如果没有设置 key，Vue.js 只能通过比较元素的内容来确定是否需要重新渲染，这可能导致性能下降。

2.维持组件状态：在使用 v-for 渲染动态组件时，key 也可以帮助 Vue.js 维护组件的内部状态。当重新排序或过滤列表时，Vue.js 会根据 key 的变化来销毁和重新创建组件实例，从而保持每个组件的状态。

3.跟踪元素身份：在处理可变列表时，key 有助于跟踪每个元素的身份。通过设置确定的 key，Vue.js 可以更好地追踪每个元素，并正确地应用过渡效果、动画和其他操作。如果不设置 key，列表元素在重新排序时可能会产生意外的行为。

注意：key 必须是具有唯一性的值。尽量不使用索引或随机数作为 key，因为它们可能导致不稳定的渲染结果。