Vue3 循环语句：从入门到实战的完整指南
在前端开发中，数据驱动视图是现代框架的核心思想。Vue 3 作为当前主流的渐进式前端框架，其响应式系统与模板语法的结合，让开发者能以极低的学习成本实现动态界面。而其中最常用、也最基础的能力之一，就是Vue3 循环语句。它就像一条“数据流水线”，把原始数据逐个“搬”到页面上，让静态的 HTML 变成会动的动态列表。
如果你正在学习 Vue 3，或者已经接触过一段时间但对循环语句的使用还不够熟练，那么这篇指南就是为你准备的。我们不会堆砌术语，而是从真实场景出发，一步步带你理解 Vue 3 循环语句的本质与高级用法。
什么是 Vue3 循环语句？
简单来说，Vue3 循环语句就是通过 v-for 指令，将一个数组或对象中的每一项，渲染成一段重复的 HTML 结构。它是 Vue 模板中最核心的动态渲染机制之一。
你可以把它想象成“自动复制粘贴”——你告诉 Vue：“这里有 10 个用户数据，每个都生成一个用户卡片”。Vue 会自动为你遍历这 10 条数据，生成 10 个一样的卡片，而且一旦数据变了，页面也会自动更新。
📌 关键提示：Vue 3 中的
v-for不仅支持数组，还支持对象、字符串甚至数字，灵活性极高。
基础语法：v-for 指令详解
v-for 的基本语法格式如下：
<template>
<div>
<!-- 基础用法：遍历数组 -->
<p v-for="item in items" :key="item.id">
{{ item.name }}
</p>
</div>
</template>
<script setup>
// 定义数据
const items = [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
</script>
代码解析
v-for="item in items"：表示遍历items数组，每次迭代把当前项赋值给变量item。:key="item.id"：必须添加！Vue 通过key来识别每个元素，从而高效更新 DOM。如果省略key，Vue 会报警告。{{ item.name }}：输出当前项的name字段。
⚠️ 重要提醒：
key必须是唯一的，推荐使用数据的唯一标识（如 ID），避免使用索引index，除非数据不会变动。
遍历数组：从简单到复杂
创建数组与初始化
<script setup>
// 声明一个用户列表数组
const userList = [
{ id: 101, username: 'alice', age: 24 },
{ id: 102, username: 'bob', age: 30 },
{ id: 103, username: 'charlie', age: 27 }
]
</script>
<template>
<ul>
<!-- 遍历数组，输出用户名和年龄 -->
<li v-for="(user, index) in userList" :key="user.id">
<!-- index 是当前项的索引（从 0 开始） -->
第 {{ index + 1 }} 位用户：{{ user.username }}，年龄 {{ user.age }}
</li>
</ul>
</template>
输出结果
第 1 位用户：alice，年龄 24
第 2 位用户：bob，年龄 30
第 3 位用户：charlie，年龄 27
✅ 提示：
v-for="(item, index) in list"中，index是当前项在数组中的位置，从 0 开始。如果你需要显示“第几个”，记得加 1。
遍历对象：键值对的循环处理
v-for 不仅能处理数组，还能遍历对象。它支持三种形式的写法：
<script setup>
const userInfo = {
name: '小明',
gender: '男',
city: '北京',
hobby: '编程'
}
</script>
<template>
<div>
<!-- 1. 只获取值 -->
<p v-for="value in userInfo" :key="value">
值：{{ value }}
</p>
<!-- 2. 获取键和值 -->
<p v-for="(value, key) in userInfo" :key="key">
{{ key }}：{{ value }}
</p>
<!-- 3. 获取键、值、索引（对象无索引，index 为 0） -->
<p v-for="(value, key, index) in userInfo" :key="key">
第 {{ index + 1 }} 项：{{ key }} = {{ value }}
</p>
</div>
</template>
输出结果（示例）
name：小明
gender：男
city：北京
hobby：编程
🔍 小贴士：对象遍历时，
key是属性名，index没有实际意义（始终为 0），但语法上允许存在。建议只在需要时使用。
高级用法：控制循环顺序与条件渲染
1. 反向遍历数组
有时候我们需要从后往前渲染，比如显示最新消息在顶部。
<template>
<ul>
<!-- 从后往前遍历 -->
<li v-for="(item, index) in reversedItems" :key="item.id">
{{ index + 1 }}. {{ item.title }}
</li>
</ul>
</template>
<script setup>
const items = [
{ id: 1, title: '第一篇' },
{ id: 2, title: '第二篇' },
{ id: 3, title: '第三篇' }
]
// 使用计算属性实现反向
const reversedItems = computed(() => items.slice().reverse())
</script>
✅ 使用
slice().reverse()是安全的，不会修改原数组。
2. 条件循环：结合 v-if 使用
有时我们只想渲染符合条件的数据项。
<template>
<div>
<h3>年龄大于 25 的用户：</h3>
<p v-for="user in filteredUsers" :key="user.id">
{{ user.name }}（{{ user.age }}岁）
</p>
</div>
</template>
<script setup>
import { computed } from 'vue'
const users = [
{ id: 1, name: '张三', age: 23 },
{ id: 2, name: '李四', age: 28 },
{ id: 3, name: '王五', age: 22 }
]
// 计算属性过滤数据
const filteredUsers = computed(() => {
return users.filter(user => user.age > 25)
})
</script>
✅ 推荐使用
computed而非在模板中写复杂逻辑，保持模板简洁。
性能优化：key 的重要性与最佳实践
key 是 Vue 3 循环语句中最容易被忽视却最关键的点。它决定了 Vue 如何复用和排序元素。
错误示例（不推荐）
<!-- ❌ 错误：使用索引作为 key -->
<li v-for="(item, index) in items" :key="index">
{{ item.name }}
</li>
问题：当数组顺序改变或插入新项时，Vue 无法准确识别元素，可能导致 DOM 重排混乱。
正确做法（推荐）
<!-- ✅ 正确：使用唯一 ID 作为 key -->
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
💡 原则：
key必须唯一、稳定、不可变。优先使用数据的 ID、UUID 或时间戳。
实际案例：动态待办事项列表
我们来做一个完整的示例，模拟一个“待办事项”应用，包含添加、删除、标记完成功能。
<script setup>
import { ref } from 'vue'
// 待办事项列表
const todoList = ref([
{ id: 1, text: '学习 Vue3', done: false },
{ id: 2, text: '写博客', done: true }
])
// 新任务输入框
const newTodo = ref('')
// 添加新任务
const addTodo = () => {
if (newTodo.value.trim() === '') return
todoList.value.push({
id: Date.now(), // 使用时间戳作为唯一 ID
text: newTodo.value,
done: false
})
newTodo.value = '' // 清空输入框
}
// 删除任务
const deleteTodo = (id) => {
todoList.value = todoList.value.filter(item => item.id !== id)
}
// 切换完成状态
const toggleDone = (id) => {
const item = todoList.value.find(item => item.id === id)
if (item) item.done = !item.done
}
</script>
<template>
<div>
<h2>待办事项</h2>
<input
v-model="newTodo"
placeholder="输入新任务"
@keyup.enter="addTodo"
/>
<button @click="addTodo">添加</button>
<ul>
<!-- 使用 v-for 渲染列表 -->
<li
v-for="item in todoList"
:key="item.id"
:class="{ done: item.done }"
>
<span @click="toggleDone(item.id)">
{{ item.text }}
</span>
<button @click="deleteTodo(item.id)">删除</button>
</li>
</ul>
</div>
</template>
<style>
.done {
text-decoration: line-through;
color: #888;
}
</style>
功能亮点
- 支持动态添加、删除、切换完成状态。
- 使用
Date.now()生成唯一 ID，避免key冲突。 @keyup.enter监听回车键，提升用户体验。:class="{ done: item.done }"实现状态样式切换。
总结与建议
Vue3 循环语句虽然基础，却是构建动态界面的基石。掌握它，意味着你已经迈出了响应式开发的第一步。
- 核心原则：
v-for+ 唯一key= 高效、稳定的渲染。 - 最佳实践：优先使用数据 ID 作为
key，避免用index。 - 性能优化：结合
computed和ref管理数据，避免模板中写复杂逻辑。 - 真实场景：在列表、卡片、表单等高频场景中，
v-for无处不在。
无论你是初学者还是中级开发者，只要熟练掌握 Vue3 循环语句，就能轻松应对绝大多数数据展示需求。记住：代码不是写出来的，是“想出来的”。多思考数据结构与视图的映射关系，你会发现 Vue3 的循环语句，其实是一门艺术。