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函数在组件创建之前执行，用于设置组件的响应式状态、计算属性、方法等。

<template>
  <div>
    <!-- 用户列表渲染区域 -->
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
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可以方便地实现这些功能。

<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应用。