vue 3 中循环遍历列表主要使用 v-for 指令，支持数组（可解构、带索引、需 :key）、对象（1–3 参数）、数字（1 起始）、字符串及可迭代对象；v-if 不可与 v-for 同标签，应配合 使用。

Vue 3 中循环遍历列表数据主要靠 v-for 指令，它能高效渲染数组、对象、数字甚至字符串，写法简洁且贴近 JavaScript 习惯。

遍历数组：最常用场景

基本格式是 v-for="item in items"，其中 items 是响应式数组，item 是当前遍历项的别名。

• 要访问索引，写成 v-for="(item, index) in items"，注意顺序：元素在前，索引在后
• 推荐为每个元素添加 :key，优先用唯一 ID（如 :key="item.id"），避免用 index，除非列表静态或不涉及增删动画
• 支持解构写法，比如 v-for="{id, title, state} in posts"，直接展开对象属性使用

遍历对象：处理键值对

对象遍历支持一至三个参数：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• v-for="value in obj" → 只取值
• v-for="(value, key) in obj" → 同时取值和键
• v-for="(value, key, index) in obj" → 再加索引（从 0 开始）
• :key 建议用 key（如 :key="key"），因为对象键通常唯一且稳定

其他可遍历类型

v-for 不限于数组和对象：

• 数字：写 v-for="n in 5" 会生成 1 到 5 的整数（从 1 开始，不是 0）
• 字符串：如 v-for="char in 'hello'"，每次循环一个字符
• 可迭代对象（如 Map、Set、生成器）也支持，语法一致

配合条件与结构优化

想过滤或控制渲染逻辑，注意优先级：

• v-if 优先级高于 v-for，不能直接写在同一标签上（否则 v-if 访问不到 item）
• 正确做法是外层用 <template v-for></template>，内层用 <li v-if>
• 需要分组或包裹多个元素时，<template></template> 是理想容器，它不会被渲染为真实 DOM 节点

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