VueUse 中的 groupBy 怎么用？

在 Vue.js 开发中，数据处理是常见的任务，VueUse 是一个非常实用的工具库，其中的 groupBy 方法可以帮助我们对数据进行分组操作，VueUse 中的 groupBy 具体怎么用呢？下面我们来详细探讨。

groupBy 的基本概念

groupBy 方法的核心作用就是根据指定的条件，将数组中的元素进行分组，比如我们有一个包含多个对象的数组，每个对象代表一个学生，有姓名、班级等属性，我们可以通过 groupBy 按照班级对学生进行分组。

使用步骤

（一）安装 VueUse

你需要在你的 Vue 项目中安装 VueUse，如果是使用 npm 包管理器，在项目根目录下执行命令：npm install @vueuse/core；如果是使用 yarn，则执行：yarn add @vueuse/core，安装完成后，就可以在项目中引入使用了。

（二）引入 groupBy

在需要使用 groupBy 的组件中，引入它。

```javascript import { groupBy } from '@vueuse/core'; ```

（三）准备数据

假设我们有这样一个数组：

```javascript const students = [ { name: '张三', class: '一班' }, { name: '李四', class: '二班' }, { name: '王五', class: '一班' }, { name: '赵六', class: '三班' } ]; ```

（四）使用 groupBy 进行分组

现在我们要按照班级对学生进行分组,代码如下：

```javascript const groupedStudents = groupBy(students, (student) => student.class); ```

这里,groupBy 方法接收两个参数，第一个参数是要分组的数组（students），第二个参数是一个回调函数，这个回调函数用于指定分组的依据，在这个例子中，我们通过返回学生的班级（student.class）来确定分组的键。

执行完上述代码后,groupedStudents 就是一个对象，它的键是班级名称（'一班'、'二班'、'三班'），值是对应班级的学生数组，groupedStudents['一班'] 就是包含张三和王五的数组。

进阶用法

（一）多条件分组

我们可能需要根据多个条件进行分组,比如除了班级，还想根据学生的性别进一步分组，假设我们的学生对象增加了性别属性：

```javascript const studentsWithGender = [ { name: '张三', class: '一班', gender: '男' }, { name: '李四', class: '二班', gender: '女' }, { name: '王五', class: '一班', gender: '男' }, { name: '赵六', class: '三班', gender: '男' } ]; ```

那么多条件分组的代码可以这样写：

```javascript const multiGroupedStudents = groupBy(studentsWithGender, (student) => `${student.class}-${student.gender}`); ```

这里我们通过拼接班级和性别来作为分组的键,这样就实现了多条件分组，multiGroupedStudents 的键就会是类似 '一班-男' 这样的形式，值是对应的学生数组。

（二）自定义分组键的处理

如果我们不想直接使用数据中的某个属性作为分组键,而是想对其进行一些处理，比如将班级名称转换为大写后再作为分组键，代码如下：

```javascript const studentsUpperCaseClass = [ { name: '张三', class: '一班' }, { name: '李四', class: '二班' }, { name: '王五', class: '一班' }, { name: '赵六', class: '三班' } ]; const upperCaseGroupedStudents = groupBy(studentsUpperCaseClass, (student) => student.class.toUpperCase()); ```

这样,分组键就会是 '一班' 转换为大写后的形式（假设班级名称是中文，实际项目中如果是英文单词会更明显看到转换效果）。

（三）与其他 VueUse 方法结合使用

VueUse 提供了很多实用的方法，groupBy 可以和它们结合起来实现更强大的功能，比如我们可以先对数据进行过滤，再进行分组，假设我们只想对成绩大于 60 分的学生进行分组（假设学生对象有成绩属性）：

```javascript import { filter, groupBy } from '@vueuse/core'; const studentsWithScore = [ { name: '张三', class: '一班', score: 70 }, { name: '李四', class: '二班', score: 50 }, { name: '王五', class: '一班', score: 80 }, { name: '赵六', class: '三班', score: 65 } ]; const filteredStudents = filter(studentsWithScore, (student) => student.score > 60); const passedGroupedStudents = groupBy(filteredStudents, (student) => student.class); ```

这里先使用 filter 方法过滤出成绩大于 60 分的学生，然后再用 groupBy 按照班级分组，这样 passedGroupedStudents 就是成绩及格的学生按照班级分组的结果。

实际应用场景

（一）表格数据展示

在开发表格组件时,有时候需要对数据进行分组展示，比如一个学生成绩表格，我们可以先通过 groupBy 按照班级分组，然后在表格中先显示班级名称，再列出该班级的学生成绩，这样可以让表格数据更加清晰有条理，方便用户查看。

（二）数据统计

对于一些统计类的功能,比如统计每个班级的学生人数，我们可以先通过 groupBy 按照班级分组，然后遍历分组后的对象，计算每个分组（班级）的数组长度，就可以得到每个班级的学生人数。

```javascript const classStudentCounts = {}; Object.entries(groupedStudents).forEach(([classKey, studentArray]) => { classStudentCounts[classKey] = studentArray.length; }); ```

这样 classStudentCounts 就是一个对象，键是班级名称，值是该班级的学生人数。

（三）动态菜单生成

如果我们有一个根据数据生成菜单的需求,比如不同类别的商品生成不同的菜单分组，我们可以先对商品数据（假设商品对象有类别属性）使用 groupBy 按照类别分组，然后根据分组后的结果生成菜单，每个分组（类别）作为菜单的一个分组标题，该分组下的商品作为菜单的子项。

注意事项

（一）数据类型

要确保传入 groupBy 的数组中的元素是对象（或者至少是可以通过回调函数获取到用于分组的属性值的数据类型），如果数组中的元素是简单数据类型（如字符串、数字等），回调函数的写法要相应调整，比如直接返回元素本身（如果是按照元素值分组）。

（二）性能考虑

当处理大量数据时,groupBy 的性能可能会受到影响，虽然 VueUse 的 groupBy 方法已经做了一定的优化，但如果数据量极大，还是需要考虑是否有更高效的分组方式，或者是否可以对数据进行分页处理后再分组等优化措施。

（三）兼容性

确保你的项目所使用的 Vue 版本与 VueUse 兼容，不同版本的 VueUse 可能对 Vue 有不同的版本要求，在使用前最好查看一下 VueUse 的官方文档，确认兼容性。

VueUse 中的 groupBy 方法是一个非常实用的数据分组工具，通过本文介绍的基本用法、进阶用法以及实际应用场景，相信你已经对它有了比较深入的了解，在实际开发中，根据具体的业务需求灵活运用 groupBy，可以让我们的数据处理更加高效和便捷，也要注意一些使用过程中的注意事项，以确保代码的质量和性能，希望你在 Vue.js 项目中能够充分发挥 groupBy 的作用，提升开发效率和用户体验。