Vue 组合式函数设计：构建可复用逻辑的现代模式

快速概述：为什么需要组合式函数

在 Vue 3 中，组合式函数（Composables）是一种利用函数式编程来封装和复用组件逻辑的新模式，它让开发者能够更灵活、更优雅地组织代码，显著提升代码的可复用性和可维护性。它主要解决传统 Options API 中逻辑分散、难以复用和代码臃肿的问题，特别适用于处理复杂组件、跨组件共享状态或封装通用业务逻辑（如数据请求、表单校验、鼠标追踪等）的场景。使用组合式函数前，你需要具备 HTML、CSS 和 JavaScript 基础，并确保项目基于 Vue 3 及以上版本。

核心概念与原理

组合式函数的核心思想是将组件内相关的逻辑（如响应式状态、计算属性和方法）提取到一个独立的函数中，该函数可以返回任何需要的状态或方法供组件使用。其工作流程通常包括：在函数内部使用 ref 或 reactive 创建响应式状态，使用 computed 定义派生状态，并通过 watch 监听变化，最后将需要暴露给组件的状态和方法返回。这种模式遵循“关注点分离”原则，让组件模板更专注于展示，逻辑更易于测试和复用。

实战步骤与代码

下面我们通过一个完整的示例，演示如何创建一个用于追踪鼠标位置的组合式函数 useMouse。

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

在项目的 src/composables 目录下新建 useMouse.js 文件。

// src/composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'
// 导出名为 useMouse 的组合式函数 export function useMouse() { // 使用 ref 创建响应式状态 x 和 y，初始值为 0 const x = ref(0) const y = ref(0)
// 更新鼠标坐标的函数 function update(event) { x.value = event.pageX y.value = event.pageY }
// 在组件挂载后添加事件监听器 onMounted(() => window.addEventListener('mousemove', update)) // 在组件卸载前移除事件监听器，避免内存泄漏 onUnmounted(() => window.removeEventListener('mousemove', update))
// 返回响应式坐标，供组件使用 return { x, y } } 

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

在任意 Vue 组件的 <script setup> 中引入并使用它。

<template>
  <div>
    <p>鼠标位置: X: {{ x }}, Y: {{ y }}</p>
  </div>
</template>
<script setup> // 导入组合式函数 import { useMouse } from '../composables/useMouse'
// 调用函数并解构出响应式状态 const { x, y } = useMouse() </script> 

通过上述两步，任何组件都可以通过简单调用 useMouse() 来复用完整的鼠标追踪逻辑，无需重复编写事件监听代码。

常见坑点与优化

• 响应式丢失：在组件中解构组合式函数返回的 ref 对象时，如果直接解构（如 const { x } = useMouse()），会失去响应性。必须使用 ref 对象本身，或使用 toRefs 进行转换。
• 生命周期使用限制：组合式函数内部的 onMounted、onUnmounted 等生命周期钩子只能在 setup 阶段同步调用，不能放在异步回调或条件语句中。
• 清理副作用：在 onUnmounted 中务必清理事件监听器、定时器等副作用，防止内存泄漏。
• 性能优化：对于复杂计算，使用 computed 进行缓存；避免在组合式函数内部创建不必要的响应式对象，以减少代理开销。