Vue 教程：使用组合式 API 组织业务逻辑——从选项式到函数式的思维转变

快速概述

组合式 API 是 Vue 3 引入的编写组件逻辑的新方式，旨在解决选项式 API 在组件逻辑复杂时出现的代码分散、复用困难等问题。它允许开发者按功能而非选项类型来组织代码，将相关逻辑封装进可复用的函数中，实现更清晰的代码结构。适用场景包括中大型单页应用、复杂组件开发以及需要高度复用业务逻辑的项目。使用前需确保环境已安装 Vue 3 及以上版本，并熟悉 JavaScript ES6 模块语法。

核心概念与原理

选项式 API 通过 data、methods、computed、watch 等固定选项来定义组件行为，逻辑关注点分散在各选项中。组合式 API 则提供 setup 函数作为组件逻辑的入口，在此函数内，开发者可以自由地使用 ref、reactive 创建响应式数据，用 computed 定义计算属性，用 watch 监听变化，并定义普通函数作为方法。其核心思想是“按功能组织”，将实现同一业务功能的响应式状态、计算属性和方法放在一起，并通过自定义组合函数（Composables）实现跨组件复用，从而替代 mixin 的部分功能，使代码更模块化、可读性更强。

实战步骤与代码

下面通过一个用户列表搜索功能的示例，演示如何从选项式迁移到组合式。

第一步：创建 Vue 3 项目

使用 Vue CLI 创建项目并启动开发服务器：

vue create vue-composition-demo
cd vue-composition-demo
npm run serve

第二步：选项式 API 实现

在 src/components/UserListOptions.vue 中，逻辑分散在 data、computed 和 methods 中：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索用户" />
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
<script> export default { data() { return { users: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }], searchQuery: '' } }, computed: { filteredUsers() { return this.users.filter(user => user.name.includes(this.searchQuery)) } } } </script>

第三步：组合式 API 重构

创建组合函数 src/composables/useUserSearch.js，将相关逻辑封装在一起：

import { ref, computed } from 'vue'
// 组合函数：封装用户搜索逻辑 export function useUserSearch(initialUsers) { const users = ref(initialUsers) // 响应式用户列表 const searchQuery = ref('') // 响应式搜索关键词
// 计算属性：根据关键词过滤用户 const filteredUsers = computed(() => { return users.value.filter(user => user.name.includes(searchQuery.value)) })
// 返回响应式数据和计算属性供组件使用 return { users, searchQuery, filteredUsers } }

在 src/components/UserListComposition.vue 中使用该组合函数：

<template> <div> <input v-model="searchQuery" placeholder="搜索用户" /> <ul> <li v-for="user in filteredUsers" :key="user.id">{{ user.name }}</li> </ul> </div> </template>

<script> import { useUserSearch } from '../composables/useUserSearch'
export default { setup() { // 初始化用户数据并解构返回的响应式状态 const { users, searchQuery, filteredUsers } = useUserSearch([ { id: 1, name: '张三' }, { id: 2, name: '李四' } ])
return { users, searchQuery, filteredUsers } } } </script>

通过对比可见，组合式 API 将数据、计算属性与相关操作逻辑集中在一个函数中，组件代码更简洁，且该组合函数可轻松复用于其他组件。

常见坑点与优化

• 响应式丢失：在 setup 中解构 reactive 对象会失去响应性，应使用 toRefs 或直接使用 ref 定义基础类型数据。
• 生命周期钩子命名：组合式 API 中生命周期钩子需引入 onMounted、onUpdated 等函数，并传入回调，而非直接定义选项。
• 组合函数命名规范：自定义组合函数应以 use 开头，便于识别和遵守社区约定。
• 性能优化：合理使用 computed 缓存计算结果，避免在模板中执行复杂逻辑；对于大型列表，可考虑使用 v-memo 指令减少不必要的渲染。
• 逻辑复用：优先使用组合函数替代 mixin，避免命名冲突和来源不清的问题，提升代码可维护性。