Vue 3 自定义 Hook 是以 use 开头、封装响应式逻辑的普通函数，需职责清晰、命名规范、管理生命周期副作用、只暴露必要接口，并统一存放在 src/composables 目录下按功能组织。
Vue 3 的组合式函数（也叫自定义 Hook）本质就是一个普通 JavaScript 函数，它内部调用 Composition API（如 ref、reactive、watch、onMounted 等），封装一段可复用的响应式逻辑，并返回需要暴露的数据和方法。关键不在于多复杂，而在于职责清晰、命名规范、解耦彻底。
以 use 开头，明确意图
所有组合式函数必须以 use 开头（如 useCounter、useInput、useMousePosition），这是 Vue 社区约定，也是 IDE 自动识别和类型推导的基础。函数名应直接反映其功能，避免模糊词如 handle 或 utils。
- ✅ 推荐：
useDebounce、useLocalStorage、usePagination - ❌ 避免：
myLogic、commonHook、doSomething
封装完整生命周期与副作用
一个健壮的自定义 Hook 不只是返回 ref，还要管理副作用的注册与清理。比如监听全局事件、发起请求、订阅外部状态时，必须在合适时机添加和移除监听器。
- 使用 onMounted 注册初始化逻辑（如添加事件监听）
- 使用 onUnmounted 清理资源（如移除事件监听、取消定时器、abort fetch 请求）
- 若涉及异步操作（如 useFetch），建议内置 loading、error、data 状态，并支持手动触发刷新
只暴露必要接口，保持内聚
返回值应精简：只暴露组件真正需要使用的响应式数据（ref 或 reactive 对象）和操作函数。不要返回内部变量或未使用的 API。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 例如 useInput 只需返回
{ value, updateValue }，而非整个 ref 实例或 setup 内部的其他临时变量 - 如果逻辑较重（如分页），可返回一个对象，包含
pageInfo（计算属性）、loadNext、reset等语义化方法 - 避免返回 setup 中未参与响应式链路的普通变量或函数
统一存放，按功能组织目录
项目中建议新建 src/composables 目录（也可叫 src/hooks），按用途分层存放：
-
src/composables/dom/：鼠标位置、窗口尺寸、滚动监听 -
src/composables/storage/：localStorage、sessionStorage 同步读写 -
src/composables/network/：封装 fetch、防抖请求、错误重试 -
src/composables/form/：表单校验、输入防抖、双向绑定增强
这样既方便查找复用，也利于团队协作和后续抽象成独立包。
