Vue 3 组合式函数（Composables）设计：构建可复用业务逻辑的现代模式

快速概述

Vue 3 组合式函数（Composables）解决的核心问题是组件逻辑的复用与组织。在选项式 API 中，相关逻辑分散在 data、methods、watch 等选项中，导致代码难以维护。组合式函数允许你将一段有状态的业务逻辑封装为独立的函数，在多个组件间共享，从而提升代码的可读性与可维护性。它适用于任何需要复用状态逻辑的场景，如计数器、表单校验、异步数据请求等。前置环境要求是 Vue 3 项目，且组件需使用 setup 语法或 <script setup>。

核心概念与原理

组合式函数本质是一个普通的 JavaScript 函数，其命名约定以 use 开头。它内部可以调用 Vue 的响应式 API（如 ref、reactive、computed、生命周期钩子等），并返回一个包含状态和方法的对象。当组件在 setup 中调用该函数时，函数内部创建的响应式状态会自动绑定到当前组件实例上，实现逻辑的复用。其核心工作流程是：定义函数 → 在函数内创建响应式状态与逻辑 → 返回需要暴露的状态与方法 → 在组件中解构使用。

实战步骤与代码

下面通过一个计数器示例演示组合式函数的完整创建与使用流程。

步骤 1：创建组合式函数文件

在项目 src/composables 目录下新建 useCounter.js 文件：

// useCounter.js
import { ref } from 'vue'
// 组合式函数：以 use 开头 export function useCounter(initialValue = 0) { // 创建响应式状态 const count = ref(initialValue)
// 定义修改状态的方法 function increment() { count.value++ }
function decrement() { count.value-- }
// 返回状态和方法供组件使用 return { count, increment, decrement } }

步骤 2：在组件中使用组合式函数

在 Counter.vue 组件中导入并使用：

<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template>

<script setup> import { useCounter } from './composables/useCounter'
// 调用组合式函数，解构返回的状态和方法 const { count, increment, decrement } = useCounter(10) </script>

通过以上两步，即可在任意组件中复用 useCounter 的逻辑。若使用选项式 API，可在 setup() 中调用并返回。

常见坑点与优化

• 解构丢失响应性：从组合式函数返回的对象中直接解构 ref 状态会丢失响应性。应使用 toRefs 或直接访问 .value 属性。
• 命名冲突：多个组合式函数返回同名状态时，解构会产生冲突。建议在返回对象时使用语义化命名或通过 reactive 分组。
• 副作用清理：若组合式函数中设置了定时器或事件监听，应在 onUnmounted 钩子中清理，避免内存泄漏。
• 性能优化：避免在组合式函数中创建不必要的响应式对象；对于计算量大的逻辑，使用 computed 进行缓存。同时，确保组合式函数是纯逻辑封装，不直接操作 DOM，以保持可测试性。