第03章： Vue 3 组合式函数深度指南

在现代前端开发的演进过程中，代码的可重用性、模块化和可维护性一直是开发者追求的核心目标。Vue 3 引入的 Composables（组合式函数）为我们提供了一种革命性的方式来实现这些目标。本章将深入探讨 Composables 的核心概念、设计理念、实际应用和最佳实践，帮助您掌握这一强大的开发模式。

Composables 不仅仅是一个技术特性，它代表了一种全新的思维方式 - 从传统的选项式组织转向函数式组合。这种转变让我们能够以更加灵活、直观的方式构建复杂的应用程序。

学习目标

通过本章的学习，您将能够：

深入理解 Options API 与 Composition API 的本质区别和各自优势
熟练掌握 Composition API 的核心概念和使用方法
独立创建 高质量、可重用的 Composables 函数
灵活运用 Composables 的组合模式解决复杂业务场景
遵循最佳实践 编写可维护、可测试的组合式函数
理解设计原则 掌握 Composables 的设计哲学和架构思想
解决实际问题 运用 Composables 优化现有项目结构

从 Options API 到 Composition API 的演进历程

Options API 的时代背景与设计理念

在 Vue 3 引入 Composition API 之前，开发者主要依赖 Options API 来组织组件逻辑。Options API 通过将组件的不同方面（响应式数据、生命周期方法、计算属性、侦听器等）定义在特定的选项中来工作，如下所示：

go 复制代码

<!-- Template -->
<template>
  <div class="my-component">
    <h2>{{ title }}</h2>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    // 组件属性定义
    initialCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    // 响应式数据
    return {
      count: this.initialCount,
      title: 'Vue Component',
      message: 'Hello Vue'
    }
  },
  computed: {
    // 计算属性
    doubleCount() {
      return this.count * 2
    },
    displayMessage() {
      return `${this.message} - Count: ${this.count}`
    }
  },
  watch: {
    // 侦听器
    count(newVal, oldVal) {
      console.log(`Count changed from ${oldVal} to ${newVal}`)
      if (newVal > 10) {
        this.message = 'Count is getting high!'
      }
    }
  },
  methods: {
    // 方法
    increment() {
      this.count++
    },
    reset() {
      this.count = this.initialCount
    },
    updateTitle(newTitle) {
      this.title = newTitle
    }
  },
  created() {
    // 生命周期钩子
    console.log('Component created')
    this.initializeComponent()
  },
  mounted() {
    console.log('Component mounted')
  },
  // 其他生命周期钩子...
}
</script>

<!-- Styles -->
<style scoped>
.my-component {
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

这种方法在其设计初期很好地服务了 Vue 社区，并且在 Vue 3 中仍然完全可用。Options API 的优点包括：

结构清晰：每种类型的逻辑都有明确的位置
学习曲线平缓：对于初学者来说容易理解
约定明确：团队成员都知道在哪里找到特定类型的代码

Options API 的深层局限性

然而，随着应用程序变得越来越复杂，Options API 的一些根本性局限开始显现：

1. 逻辑分散问题（Logic Fragmentation）

在大型组件中，相关的逻辑往往被强制分散在不同的选项中。让我们通过一个实际的例子来理解这个问题：

go 复制代码

<template>
  <div class="user-dashboard">
    <!-- 用户信息区域 -->
    <div class="user-info">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
      <button @click="refreshUserData">Refresh</button>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <input v-model="searchQuery" placeholder="Search users...">
      <div class="filters">
        <select v-model="selectedRole">
          <option value="">All Roles</option>
          <option value="admin">Admin</option>
          <option value="user">User</option>
        </select>
      </div>
    </div>

    <!-- 用户列表 -->
    <div class="user-list">
      <div v-for="user in filteredUsers" :key="user.id" class="user-item">
        {{ user.name }} - {{ user.role }}
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button @click="previousPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserDashboard',
  data() {
    return {
      // 用户相关数据
      user: null,
      userLoading: false,

      // 搜索相关数据
      searchQuery: '',
      selectedRole: '',

      // 用户列表相关数据
      users: [],
      usersLoading: false,

      // 分页相关数据
      currentPage: 1,
      pageSize: 10,
      totalUsers: 0
    }
  },
  computed: {
    // 搜索相关计算属性
    filteredUsers() {
      return this.users.filter(user => {
        const matchesSearch = user.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        const matchesRole = !this.selectedRole || user.role === this.selectedRole
        return matchesSearch && matchesRole
      })
    },

    // 分页相关计算属性
    totalPages() {
      return Math.ceil(this.totalUsers / this.pageSize)
    },

    paginatedUsers() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.filteredUsers.slice(start, end)
    }
  },
  watch: {
    // 搜索相关侦听器
    searchQuery() {
      this.currentPage = 1 // 重置到第一页
      this.debouncedSearch()
    },

    selectedRole() {
      this.currentPage = 1
      this.fetchUsers()
    },

    // 分页相关侦听器
    currentPage() {
      this.fetchUsers()
    }
  },
  methods: {
    // 用户相关方法
    async fetchUserData() {
      this.userLoading = true
      try {
        this.user = await api.getCurrentUser()
      } catch (error) {
        console.error('Failed to fetch user data:', error)
      } finally {
        this.userLoading = false
      }
    },

    refreshUserData() {
      this.fetchUserData()
    },

    // 搜索相关方法
    debouncedSearch: debounce(function() {
      this.fetchUsers()
    }, 300),

    // 用户列表相关方法
    async fetchUsers() {
      this.usersLoading = true
      try {
        const response = await api.getUsers({
          page: this.currentPage,
          pageSize: this.pageSize,
          search: this.searchQuery,
          role: this.selectedRole
        })
        this.users = response.data
        this.totalUsers = response.total
      } catch (error) {
        console.error('Failed to fetch users:', error)
      } finally {
        this.usersLoading = false
      }
    },

    // 分页相关方法
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },

    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  },
  created() {
    // 初始化所有功能
    this.fetchUserData()
    this.fetchUsers()
  }
}
</script>

在这个例子中，我们可以清楚地看到逻辑分散的问题：

用户信息功能 ：数据分散在 data（user, userLoading），方法分散在 methods（fetchUserData, refreshUserData），初始化在 created
搜索功能 ：数据在 data（searchQuery, selectedRole），计算属性在 computed（filteredUsers），侦听器在 watch，方法在 methods
分页功能：数据、计算属性、方法都分散在各自的选项中

这种分散使得：

理解单个功能需要在多个选项间跳转
修改功能时容易遗漏相关代码
代码审查变得困难
新团队成员难以快速理解代码结构

2. 逻辑复用的困难

在 Options API 中，复用逻辑主要通过以下方式实现，但都存在明显的问题：

Mixins 的问题：

go 复制代码

// userMixin.js
exportconst userMixin = {
  data() {
    return {
      user: null,
      loading: false
    }
  },
methods: {
    async fetchUser() {
      this.loading = true
      try {
        this.user = await api.getUser()
      } finally {
        this.loading = false
      }
    }
  },
  created() {
    this.fetchUser()
  }
}

// searchMixin.js
exportconst searchMixin = {
  data() {
    return {
      query: '',
      results: []
    }
  },
methods: {
    search() {
      // 搜索逻辑
    }
  }
}

// 在组件中使用
exportdefault {
mixins: [userMixin, searchMixin],
// 可能出现命名冲突，难以追踪数据来源
}

Mixins 的问题包括：

命名冲突风险：多个 mixins 可能有相同的属性或方法名
依赖关系不明确：难以知道某个属性来自哪个 mixin
隐式依赖：mixin 之间可能有隐式的依赖关系
难以调试：错误堆栈追踪变得复杂

第03章： Vue 3 组合式函数深度指南

学习目标

从 Options API 到 Composition API 的演进历程

Options API 的时代背景与设计理念

Options API 的深层局限性

1. 逻辑分散问题（Logic Fragmentation）

2. 逻辑复用的困难

3. TypeScript 支持的局限性