其实，

在 Vue 3 的环境中。组合式 API 已经越来越多人使用，而组合式函数则是实现代码复用的主要工具。老实说，它们让有状态的业务逻辑从组件中抽离出来像积木一样可以自由拼装。老实说，

说到从痛点说起。代码重复与维护难题

在实际项目里经常会遇到“多个组件需要一样功能”的场景。例如这方面，

• 数据可视化组件要跟踪鼠标位置；
• 交互式表单也需要获取鼠标坐标；
• 导航栏悬浮效果一样依赖鼠标坐标。

如果把相同的逻辑写在每个组件里既浪费时间，又导致后期维护成本暴涨。Vue 2 时代的 mixin 解决了重复代码。但混入带来的命名冲突、作用域不清晰等问题，让人头疼不已。怎么说呢，

什么是组合式函数？

组合式函数是使用 Vue 3 的组合式 API 封装并复用有状态逻辑的函数。

与普通工具函数不同，组合式函数管理的是随时间变化的数据和对应操作——即“有状态”的业务逻辑。

用鼠标跟踪器演示组合式函数

先看直接在组件内部实现时的代码：

若另一个组件也需要此功能，就必须复制粘贴一遍。下面把它封装成一个组合式函数：

// mouse.js
import { ref,onMounted,onUnmounted } from 'vue'
export function useMouse {
const x = ref
const y = ref
function update {
x.value = event.pageX
y.value = event.pageY
}
onMounted => window.addEventListener)
onUnmounted => window.removeEventListener)
return { x。
y }
}

使用时仅需一行代码：

通过抽离，组件变得更简洁，逻辑也更易维护。

说到进阶技巧。处理响应式输入

组合式函数的强大之处在于能灵活处理各种输入类型，让业务逻辑更具弹性。以请求数据为例，先写一个基础版本：

// fetch.js
import { ref } from 'vue'
export function useFetch {
const data = ref
const error = ref
fetch
.n)
.n
.catch
return { data。error }
}

此版本无法响应 URL 的变化。利用 watchEffect 和 Vue 3 新增的 可支持多种类型参数：

// fetch.js
import { ref,watchEffect,toValue } from 'vue'
export function useFetch {
const data = ref
const error = ref
watchEffect => {
data.value = null
error.value = null
fetch)
.n)
.n
.catch
})
return { data。error }
}

`toValue` 能自动处理以下三种输入：

1. 原始字符串或数字： useFetch
2. `ref` 对象： const urlRef=ref;useFetch，// 改变 urlRef 时会自动重新请求
3. `getter` 函数: useFetch=>`/api/posts/${props.id}`)

常用方法 & 命名规范

1️⃣ 命名规范

• MUST 开头为 `use` `useMouse`。`useFetch`,`useLocalStorage` 等。
• Avoid 名称冲突，如不要与全局变量或内置钩子同名。

2️⃣ 输入参数统一处理

`
• `toValue` 可以让你的组合式函数接受原始值、`ref` 或 `getter`，避免调用者手动拆包。
`
• `watchEffect` 或 `watch` 用来监听依赖变化并执行副作用。

3️⃣ 副作用管理

`
• `onMounted`。`onUnmounted`,`watchEffect` 等钩子应在合适时机注册和销毁，以防内存泄漏。
`
• `onBeforeUnmount` 一样可以用于提前清理，例如定时器、WebSocket 等。

4️⃣ 使用限制

`
• Avoid 在普通 JavaScript 文件中调用；只能在 `