vue组合式函数是围绕可复用、可组合、可维护构建的设计范式，强调单一职责、显式参数返回、副作用生命周期对齐及typescript类型保障。
Vue 组合式函数（Composables）不是简单的逻辑搬家，而是围绕“可复用、可组合、可维护”构建的一套设计范式。它把状态、副作用、生命周期和计算逻辑封装成独立单元，让业务逻辑真正脱离组件 UI，实现关注点分离。
单一职责：一个函数只做一件事
这是 Composable 的基石。函数名要直白反映功能，内部不掺杂无关逻辑。
- 推荐写法：useCounter（仅管理计数）、useDarkMode（仅处理主题切换）、useMouse（仅追踪坐标）
- 避免写法：useUserAndCart、useListWithSearchAndExport —— 这类函数难以复用，也难测试和调试
- 复杂流程可分层组合：比如 useProductPrice 内部调用 useBasePrice、useDiscount、useTax，各子函数依然保持单一职责
参数与返回值：显式、可控、只读
外部调用者需要清楚知道“给什么”和“得什么”，同时不能意外修改内部状态。
- 参数建议用选项对象：usePagination({ current: 1, total: 100, pageSize: 10 }) 比 usePagination(1, 100, 10) 更易扩展、更易理解
- 返回值暴露只读数据：用 readonly(ref(x)) 包裹响应式变量，防止调用方直接赋值破坏封装性
- 方法应明确语义：increment、reset、submit、cancel 等命名比 handleXxx 或 doXxx 更直观
副作用管理：绑定生命周期，自动清理
事件监听、定时器、API 订阅等副作用必须与组件生命周期对齐，否则极易引发内存泄漏。
- 在 onMounted 中注册，在 onUnmounted 中清理（如 removeEventListener、clearInterval）
- 异步请求类 Composable（如 useAsyncData）需支持 abortController 或取消 token，避免组件卸载后更新已销毁的 ref
- 浏览器 API 封装（如 useIntersectionObserver）应内置 disconnect 逻辑，并在 unmounted 时触发
类型与工程友好：TypeScript 优先，接口清晰
良好的类型定义是 Composable 可维护性的关键保障。
- 为 options 和 return 值分别定义 interface，例如 UseCounterOptions 和 UseCounterReturn
- 使用 Readonly> 明确标注只读性，避免误写
- 泛型支持提升复用度：useStorage
(key: string, defaultValue: T) 可适配任意类型缓存场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
