vue3 v-for（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发中，Vue.js 作为一款广受欢迎的框架，其简洁高效的语法设计深受开发者喜爱。而 Vue3 v-for 作为 Vue 中用于循环渲染列表的核心指令，更是贯穿了从基础到复杂项目开发的各个场景。无论是展示购物车商品列表、渲染动态菜单，还是构建数据表格，v-for 都是开发者不可或缺的工具。本文将从零开始，通过案例与代码示例，深入解析 Vue3 v-for 的核心用法、进阶技巧及常见问题，帮助读者在实战中灵活运用这一功能。

一、基础语法解析

1.1 v-for 的基本用法

v-for 是 Vue 中用于循环渲染的指令，其核心语法为：

<div v-for="item in items" :key="item.id">  
  {{ item.name }}  
</div>  

这里的关键点包括：

• item in items：表示遍历 items 数组中的每一个元素，并将当前元素赋值给 item 变量。
• key 属性：通过 :key 绑定唯一标识符，帮助 Vue 识别列表项的变化，避免渲染性能问题。

示例：渲染购物车商品列表

假设我们有一个购物车数据数组：

const cartItems = [  
  { id: 1, name: "iPhone 15", price: 999 },  
  { id: 2, name: "Galaxy S24", price: 899 },  
  { id: 3, name: "MacBook Pro", price: 1999 },  
];  

通过 v-for 渲染列表的代码如下：

<template>  
  <ul>  
    <li v-for="item in cartItems" :key="item.id">  
      {{ item.name }} - ${{ item.price }}  
    </li>  
  </ul>  
</template>  

运行后，页面将显示三个列表项，分别对应数组中的商品名称和价格。

1.2 数组遍历的三种形式

v-for 支持以下三种遍历方式，可根据具体需求选择：

对象遍历案例

假设有一个书籍信息对象：

const books = {  
  "101": { title: "Vue 3实战", author: "张三" },  
  "102": { title: "JavaScript设计模式", author: "李四" },  
};  

通过 v-for 渲染书籍列表的代码：

<template>  
  <div v-for="(book, id) in books" :key="id">  
    <h3>{{ book.title }}</h3>  
    <p>作者：{{ book.author }}</p>  
  </div>  
</template>  

二、进阶技巧与性能优化

2.1 条件渲染与 v-for 的结合

在循环中结合 v-if 或 v-show 可实现动态筛选。例如，仅渲染价格高于 1000 的商品：

<template>  
  <div v-for="item in cartItems" :key="item.id">  
    <div v-if="item.price > 1000">  
      {{ item.name }} - ${{ item.price }}（高价商品）  
    </div>  
  </div>  
</template>  

2.2 动态键值与复杂数据处理

当列表项的数据结构复杂时，需确保 key 值的唯一性。例如，若商品无唯一 id，可通过 index 生成临时键（但需谨慎使用，因索引可能重复）：

<div v-for="(product, index) in products" :key="index">  
  {{ product.name }}  
</div>  

2.3 性能优化：合理使用 key

Vue 通过 key 区分元素变化，若未提供合理 key，可能导致以下问题：

• 渲染效率低下：Vue 需重新渲染整个列表，而非仅更新变化项。
• 状态丢失：例如输入框的值可能在列表更新时被重置。

最佳实践：

• 优先使用数据中的唯一标识符（如 id）。
• 避免使用 index 作为 key（除非数据无唯一标识）。
• 复杂场景可结合 id 和 type 生成组合 key：

  :key="`${item.id}-${item.type}`"  
  

三、常见问题与解决方案

3.1 错误：未提供 key 属性

现象：控制台提示 [Vue warn] <div> element appears to have a v-for on it with a missing key attribute.
原因：Vue 要求每个循环项必须带有 key。
解决方案：添加唯一 key，如 :key="item.id"。

3.2 动态列表更新不生效

现象：修改数组后，页面未重新渲染。
原因：直接修改数组（如 array.push()）可能未触发响应式更新。
解决方案：使用 Vue 提供的数组变异方法（如 this.$set），或通过 this.array = [...this.array, newItem] 触发重新渲染。

3.3 嵌套循环与复杂结构

当需要嵌套循环（如表格的行与列）时，可通过多层 v-for 实现：

<table>  
  <tr v-for="row in rows" :key="row.id">  
    <td v-for="cell in row.cells" :key="cell.id">{{ cell.content }}</td>  
  </tr>  
</table>  

四、实战案例：动态任务看板

4.1 需求描述

构建一个任务看板，展示不同状态的任务（待办、进行中、已完成），并支持切换状态。

4.2 数据结构

const tasks = [  
  { id: 1, title: "开发登录页面", status: "todo" },  
  { id: 2, title: "编写单元测试", status: "in_progress" },  
  { id: 3, title: "部署到服务器", status: "done" },  
];  

4.3 模板实现

<template>  
  <div v-for="task in tasks" :key="task.id"  
       :class="`task-card ${task.status}`">  
    <h3>{{ task.title }}</h3>  
    <button @click="toggleStatus(task)">切换状态</button>  
  </div>  
</template>  

4.4 样式与交互

通过 CSS 根据状态添加不同颜色：

.task-card { padding: 1rem; margin: 0.5rem; }  
.todo { background: #fff176; }  
.in_progress { background: #81c784; }  
.done { background: #4dd0e1; }  

结论

通过本文的讲解，我们系统掌握了 Vue3 v-for 的核心用法、性能优化策略及常见问题的解决方法。从基础语法到复杂嵌套场景，v-for 的灵活性与强大功能在实战中得到了充分验证。对于开发者而言，合理利用 key 属性、结合条件渲染与动态数据，能够显著提升列表渲染的效率与代码可维护性。建议读者通过实际项目反复实践，逐步掌握这一工具的精髓。

关键词布局：在本文中，"vue3 v-for" 贯穿核心章节标题与案例描述，自然覆盖了技术场景、问题分析及解决方案，确保 SEO 效果的同时，保持了内容的连贯性与实用性。