Vue 3 中循环遍历列表主要使用 v-for 指令，支持数组（可解构、带索引、需 :key）、对象（1–3 参数）、数字（1 起始）、字符串及可迭代对象；v-if 不可与 v-for 同标签，应配合 <template> 使用。
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>，内层用<li v-if> - 需要分组或包裹多个元素时，
<template>是理想容器，它不会被渲染为真实 DOM 节点
