异常教程

Vue3 循环语句（建议收藏）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 的循环语句功能强大且灵活，能够帮助开发者高效地渲染列表、表格和复杂结构。无论是编程初学者还是中级开发者，掌握 Vue3 的循环语句都至关重要。本文将从基础到进阶，结合实际案例，深入浅出地讲解 Vue3 循环语句的使用方法和技巧，同时通过代码示例和形象比喻，帮助读者快速理解和应用这一功能。

一、Vue3 循环语句的核心指令：v-for

Vue3 中实现循环的核心指令是 v-for，它能够遍历数组、对象和范围，生成动态的 HTML 结构。与 JavaScript 的 for 循环不同，v-for 更侧重于数据与视图的绑定，因此其语法和使用场景也有所不同。

1.1 基础语法：遍历数组

v-for 的基本用法是遍历数组中的每个元素，并为每个元素生成对应的 DOM 节点。语法结构为：

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

代码解析：

  • item 是当前迭代的元素变量名，可自定义为 element、product 等。
  • items 是需要遍历的数组。
  • :key 是 Vue 要求的唯一标识符，用于优化渲染性能和元素追踪。

案例：渲染商品列表
假设有一个商品列表数据：

data() {  
  return {  
    products: [  
      { id: 1, name: "手机", price: 3000 },  
      { id: 2, name: "笔记本", price: 8000 },  
      { id: 3, name: "耳机", price: 500 }  
    ]  
  };  
}

通过 v-for 可以渲染为：

<ul>  
  <li v-for="product in products" :key="product.id">  
    {{ product.name }} - 价格：{{ product.price }} 元  
  </li>  
</ul>

1.2 遍历对象

除了数组，v-for 还可以遍历对象的属性。此时需要使用三个变量：value（属性值）、key（属性名）、和 index（索引，通常与 key 相同）。语法为：

<template>  
  <div v-for="(value, key, index) in object" :key="key">  
    {{ key }}: {{ value }}  
  </div>  
</template>

案例：展示用户信息
假设有一个用户对象：

data() {  
  return {  
    user: {  
      name: "张三",  
      age: 25,  
      email: "zhangsan@example.com"  
    }  
  };  
}

渲染代码如下：

<div>  
  <p v-for="(value, key) in user" :key="key">  
    {{ key }}: {{ value }}  
  </p>  
</div>

1.3 遍历数字范围

v-for 还支持遍历一个数字范围，生成指定次数的循环。例如：

<template>  
  <div v-for="n in 5" :key="n">  
    当前数字：{{ n }}  
  </div>  
</template>

此代码会渲染出 5 个 div，显示数字 1 到 5。

二、关键概念：理解 key 的作用

在使用 v-for 时，key 是一个必须提供的属性。虽然 Vue 允许省略 key，但这样做可能导致性能问题和渲染错误。

2.1 key 的作用比喻

可以把 key 想象为每个列表项的“身份证号码”。当数据变化时，Vue 通过 key 快速定位到需要更新的元素，而不是重新渲染整个列表。例如：

  • 如果列表项被删除，Vue 可以根据 key 直接移除对应的 DOM 节点。
  • 如果列表项顺序变化，Vue 会通过 key 重新排列节点，而不是重新渲染。

2.2 key 的最佳实践

  • 唯一性：确保每个元素的 key 在当前作用域内唯一。
  • 稳定性：避免使用 index 作为 key（除非数据无唯一标识）。
  • 可读性：使用有意义的标识符，如 id、name 等。

错误示例：

<!-- 错误：使用索引作为 key -->  
<div v-for="(item, index) in items" :key="index">  
  {{ item.name }}  
</div>

正确示例：

<!-- 正确：使用唯一 id -->  
<div v-for="item in items" :key="item.id">  
  {{ item.name }}  
</div>

三、进阶技巧：条件过滤与排序

3.1 结合 v-if 进行条件过滤

在循环中，可以结合 v-if 过滤符合条件的元素。例如，只渲染价格高于 1000 的商品：

<ul>  
  <li  
    v-for="product in products"  
    :key="product.id"  
    v-if="product.price > 1000"  
  >  
    {{ product.name }} - 价格：{{ product.price }} 元  
  </li>  
</ul>

注意：v-if 在 v-for 内部会先过滤数据，再循环剩余项。

3.2 动态排序与计算属性

若需要动态排序列表，可以通过计算属性（computed）实现。例如，按价格降序排列商品：

computed: {  
  sortedProducts() {  
    return this.products.sort((a, b) => b.price - a.price);  
  }  
}

然后在模板中使用：

<ul>  
  <li v-for="product in sortedProducts" :key="product.id">  
    <!-- 渲染逻辑 -->  
  </li>  
</ul>

四、复杂场景：嵌套循环与多层列表

4.1 嵌套循环：表格与分组

当需要渲染表格或分组数据时，可以使用多层 v-for。例如，展示学生与他们的成绩：

<table>  
  <tr v-for="student in students" :key="student.id">  
    <td>{{ student.name }}</td>  
    <td>  
      <ul>  
        <li v-for="score in student.scores" :key="score.id">  
          {{ score.subject }}: {{ score.value }}  
        </li>  
      </ul>  
    </td>  
  </tr>  
</table>

4.2 使用 v-for 渲染组件

在 Vue 中，可以将 v-for 与自定义组件结合，例如动态渲染卡片组件：

<template>  
  <ProductCard  
    v-for="product in products"  
    :key="product.id"  
    :product="product"  
  />  
</template>

此时，每个 ProductCard 组件会接收到对应的 product 数据。

五、性能优化与注意事项

5.1 避免在 v-for 中使用复杂计算

直接在模板中进行复杂计算会影响性能。例如：

<!-- 不建议：在 v-for 内进行计算 -->  
<div v-for="item in items" :key="item.id">  
  总价：{{ item.price * item.quantity }}  
</div>

优化方案：

computed: {  
  formattedItems() {  
    return this.items.map(item => ({  
      ...item,  
      total: item.price * item.quantity  
    }));  
  }  
}  

<div v-for="item in formattedItems" :key="item.id">  
  总价：{{ item.total }}  
</div>

5.2 大数据量的优化策略

当列表数据量较大时，可以考虑以下方法：

  1. 虚拟滚动：只渲染可视区域内的元素（如使用 vue-virtual-scroller 库）。
  2. 分页加载：通过分页或无限滚动分批加载数据。
  3. 避免频繁更新：减少不必要的数据变化，使用 key 稳定元素。

六、实战案例：动态待办事项列表

6.1 功能需求

  • 渲染待办事项列表。
  • 支持添加、删除和标记完成状态。
  • 按状态过滤（全部、未完成、已完成）。

6.2 代码实现

数据结构：

data() {  
  return {  
    todos: [  
      { id: 1, text: "学习 Vue3", completed: false },  
      { id: 2, text: "写博客", completed: true }  
    ],  
    filter: "all" // 当前过滤状态  
  };  
}

模板部分：

<div>  
  <!-- 输入框 -->  
  <input v-model="newTodo" @keyup.enter="addTodo">  
  <!-- 过滤选项 -->  
  <button @click="filter = 'all'">全部</button>  
  <button @click="filter = 'active'">未完成</button>  
  <button @click="filter = 'completed'">已完成</button>  

  <ul>  
    <li  
      v-for="todo in filteredTodos"  
      :key="todo.id"  
      :class="{ completed: todo.completed }"  
    >  
      <input  
        type="checkbox"  
        v-model="todo.completed"  
      >  
      {{ todo.text }}  
      <button @click="removeTodo(todo.id)">删除</button>  
    </li>  
  </ul>  
</div>

计算属性与方法：

computed: {  
  filteredTodos() {  
    if (this.filter === "active") {  
      return this.todos.filter(todo => !todo.completed);  
    } else if (this.filter === "completed") {  
      return this.todos.filter(todo => todo.completed);  
    } else {  
      return this.todos;  
    }  
  }  
},  

methods: {  
  addTodo() {  
    if (this.newTodo.trim()) {  
      this.todos.push({  
        id: Date.now(),  
        text: this.newTodo,  
        completed: false  
      });  
      this.newTodo = "";  
    }  
  },  

  removeTodo(id) {  
    this.todos = this.todos.filter(todo => todo.id !== id);  
  }  
}

结论

Vue3 的循环语句 v-for 是构建动态界面的核心工具，其灵活性和性能优化能力使其成为开发者的重要技能。通过本文的讲解，读者可以掌握以下内容：

  • v-for 的基础语法和使用场景（数组、对象、范围）。
  • key 的作用及最佳实践。
  • 结合条件过滤、排序和嵌套循环的进阶技巧。
  • 性能优化策略和实战案例的实现方法。

无论是构建电商商品列表、待办事项应用，还是复杂的数据展示界面，Vue3 的循环语句都能提供高效且简洁的解决方案。建议读者通过实际项目练习，逐步提升对这一功能的理解和应用能力。

最新发布

查看更多文章