vue 3 中 v-for 可用 (item, index) in list 解构获取元素和索引，index 从 0 开始且只读；必须用 :key 标识唯一性，推荐 :key="item.id"，慎用 :key="index"。

在 Vue 3 的模板语法中，使用 v-for 遍历数组并获取当前索引（index）非常简单，只需在指令中用括号解构即可。

基本写法：同时获取 item 和 index

Vue 3 中 v-for 支持类似 JavaScript 数组解构的语法。遍历数组时，可以写成：

• v-for="(item, index) in list" —— 最常用，item 是当前元素，index 是从 0 开始的索引
• v-for="(item, index, key) in list" —— 注意：第三个参数 key 并非数组索引，而是用于 key 属性绑定的唯一标识符（不推荐手动传入，应显式用 :key）

必须设置 key 属性

为确保列表渲染的正确性和性能，每个 v-for 项都应指定唯一的 :key。推荐使用数组索引（仅当列表不发生顺序变动或增删时）或元素自身的唯一 ID：

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

• ✅ 安全推荐：:key="item.id"（前提是 item.id 存在且唯一）
• ⚠️ 谨慎使用：:key="index"（若列表会排序、过滤或动态增删，可能引发状态错乱）

完整示例

假设组件 data 中有数组 fruits: ['苹果', '香蕉', '橙子']：

• {{ index }}. {{ fruit }}

渲染结果为：

• 0. 苹果
• 1. 香蕉
• 2. 橙子

注意点

• index 是只读的，在模板中不能修改；如需计算偏移量（如从 1 开始编号），直接写 {{ index + 1 }}
• 不要在 v-for 中使用 ref 或 v-model 绑定到 index，它不是响应式变量
• 如果需要访问原数组的下标以外的信息（如是否为首项/末项），建议在 setup 中预处理数据，而非在模板里判断

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！