10.4.2 使用组合式API重构用户列表页面 -TypeScript和Vue从入门到精通(三)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(三)

### 10.4.2 使用组合式API重构用户列表页面

在Vue 3中，组合式API（Composition API）的引入为开发者提供了更灵活、更强大的代码组织方式，尤其是在处理复杂组件逻辑时。在本章节中，我们将通过重构一个用户列表页面来深入探索组合式API的应用，展示其如何帮助我们以更直观、模块化的方式管理Vue组件的状态和逻辑。

#### 1. 引言

在传统的Vue 2.x版本中，我们主要通过Options API来组织组件，将模板、数据、计算属性、方法等分散在组件的`data`、`computed`、`methods`等选项中。随着项目复杂度的增加，这种方式可能会导致组件难以理解和维护。Vue 3引入的组合式API则允许我们将组件的逻辑按照功能组织成独立的函数，使代码更加模块化，易于复用和测试。

#### 2. 用户列表页面现状

假设我们目前有一个使用Vue 2.x和Options API构建的用户列表页面。这个页面从后端API获取用户数据，并在页面上展示用户列表。随着需求的增加，页面上可能还包含了筛选、排序等复杂逻辑。为了演示组合式API的优势，我们将基于这个场景进行重构。

#### 3. 重构前的准备工作

- **升级Vue版本**：确保你的项目已经升级到Vue 3，因为组合式API是Vue 3的特性。
- **安装Vue Router和Vuex（如果需要）**：虽然本章节主要聚焦于组合式API，但用户列表页面可能涉及到路由和状态管理，因此确保这些工具也已准备好。
- **理解组合式API基础**：熟悉`setup`函数、`ref`、`reactive`、`computed`、`watch`、`watchEffect`等组合式API的基本概念。

#### 4. 重构步骤

##### 4.1 引入组合式API

首先，在组件的`<script>`标签中，使用`setup`函数作为组件的入口点。`setup`函数在组件创建之前执行，用于设置组件的响应式状态、计算属性、方法等。

```vue
<template>
  <div>
    
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

export default {
  setup() {
    const users = ref([]); // 使用ref定义响应式数组

onMounted(async () => {
      // 假设fetchUsers是一个从后端获取用户数据的函数
      const fetchedUsers = await fetchUsers();
      users.value = fetchedUsers; // 赋值给users.value以更新DOM
    });

return {
      users, // 暴露给模板的响应式状态
    };
  },
};
</script>
```

##### 4.2 添加筛选和排序功能

接下来，我们可以添加筛选和排序的逻辑。使用`computed`和`watchEffect`可以方便地实现这些功能。

```vue
<script>
// ...其他代码...

setup() {
  // ...users定义和获取...

const searchQuery = ref(''); // 搜索查询
  const sortedUsers = computed(() => {
    // 根据searchQuery进行筛选和排序
    return users.value
      .filter(user => user.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
      .sort((a, b) => a.name.localeCompare(b.name));
  });

watchEffect(() => {
    // 当searchQuery变化时，自动重新计算sortedUsers
  });

return {
    users,
    searchQuery,
    sortedUsers, // 暴露给模板的计算属性
  };
},
</script>

<template>
  
  <input v-model="searchQuery" placeholder="Search users...">
  <ul>
    <li v-for="user in sortedUsers" :key="user.id">{{ user.name }}</li>
  </ul>
</template>
```

##### 4.3 进一步优化和重构

- **模块化代码**：如果逻辑变得非常复杂，可以考虑将相关逻辑封装成独立的函数或组合式函数（使用`setup`函数外定义的函数），然后在`setup`函数中引用它们。
- **使用`watch`和`watchEffect`**：根据具体需求选择合适的响应式侦听器。`watchEffect`在依赖项变化时立即执行，适用于复杂的副作用处理；而`watch`则允许你指定侦听的响应式引用，并在它们变化时执行回调函数，更适合于需要精确控制响应时机的场景。
- **利用`toRefs`或`toRef`**：当你需要将组件的响应式状态解构后传递给子组件时，可以使用`toRefs`或`toRef`来保持响应性。

#### 5. 优点总结

使用组合式API重构用户列表页面后，我们可以享受到以下几个方面的优势：

- **更好的逻辑复用**：通过封装独立的组合式函数，可以更容易地在多个组件之间复用逻辑。
- **更清晰的代码结构**：将相关逻辑组织在一起，使代码更加模块化，易于理解和维护。
- **更灵活的响应式系统**：`ref`和`reactive`提供了比`data`更灵活的响应式数据管理方式，可以处理更复杂的场景。
- **更高效的性能**：通过精确控制响应式侦听器的触发时机，可以避免不必要的计算和DOM更新，提高应用的性能。

#### 6. 结论

通过本章节的学习，我们了解了如何使用Vue 3的组合式API来重构一个用户列表页面。从引入组合式API的基本概念，到添加筛选和排序功能，再到进一步优化和重构代码，我们逐步掌握了组合式API在Vue 3项目中的应用方法。希望这些内容能够帮助你更好地理解和使用Vue 3的组合式API，从而构建出更加高效、易维护的Vue应用。

该分类下的相关小册推荐：

移动端开发指南

Vue.js从入门到精通(一)

Vue面试指南

Vue.js从入门到精通(二)

Vue.js从入门到精通(四)

Vue.js从入门到精通(三)

TypeScript和Vue从入门到精通(五)

Vue3技术解密

TypeScript和Vue从入门到精通(四)

vue项目构建基础入门与实战

vuejs组件实例与底层原理精讲

Vue原理与源码解析