composable本质是封装响应式状态和逻辑的普通函数，以use开头、存于src/composables/，内部用ref/reactive定义状态、生命周期钩子管理副作用，返回只读响应式对象，支持typescript泛型与解构重命名。
Vue.js 组合式函数（Composables）本质是封装了响应式状态和逻辑的普通 JavaScript 函数，它让跨组件复用“带状态的行为”变得清晰、安全、可维护。关键不在于写得多，而在于拆得准、职责清、暴露稳。
命名与结构要规范
所有 Composable 必须以 use 开头，比如 usePosts、useDarkMode，一眼就能识别其使用了 Vue 的响应式能力。文件统一放在 src/composables/ 目录下，便于查找和管理。函数内部用 ref 或 reactive 定义状态，用 onMounted、onUnmounted 等生命周期钩子管理副作用，最后返回一个包含响应式数据和方法的对象。
- 返回值应尽量用
readonly()包裹可变状态，防止调用方意外修改内部逻辑 - 一个函数只做一件事，例如
useFetch负责请求，useForm负责表单校验，不要混合职责 - 参数设计要显式，优先接收
MaybeRef或 getter，避免读取全局变量或隐式依赖
生命周期与副作用必须清理
Composable 中注册的事件监听、定时器、API 请求等，都属于副作用。若不主动清理，容易导致内存泄漏或状态错乱。Vue 的生命周期钩子在调用它的组件上下文中生效，因此可在函数内直接使用 onMounted 和 onUnmounted。
- 比如
useMouse在onMounted中绑定window.addEventListener('mousemove', ...) - 对应地，在
onUnmounted中调用removeEventListener移除监听 - 异步请求场景中，还需借助
AbortController中断未完成的请求
类型定义与 TypeScript 支持要到位
真正好用的 Composable 必须有完整的 TypeScript 类型。建议为参数和返回值分别定义接口，利用 ReadonlyRef、MaybeRef 等工具类型提升类型安全性。
- 参数接口明确可选字段（如
immediate?: boolean、transform?: (data: any) => T） - 返回值接口标注哪些是只读状态、哪些是可调用方法
- 泛型支持必不可少，像
useFetch<user>(url)</user>可确保数据类型准确推导
复用时解构重命名要自然
在组件中使用 Composable 时，推荐用解构赋值并按语义重命名，既避免命名冲突，又提升可读性。不需要额外包装或转换，直接消费返回的响应式对象即可。
- 例如：
const { x: mouseX, y: mouseY } = useMouse() - 多个 Composable 可同时调用，互不影响：
const { data, loading } = useFetch('/api/users')+const { isDark, toggle } = useDarkMode() - 组合嵌套也简单：一个业务 Composable（如
useUserList）内部可以调用useFetch和usePagination
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
