vue 3 逻辑复用需遵循关注点分离与职责内聚，通过 usexxx 命名的组合式函数实现高内聚、低耦合、类型安全、生命周期可控、状态隔离的可维护结构。
Vue 3 的逻辑复用不是简单地把代码抽成函数，而是围绕“关注点分离”和“职责内聚”来设计可组合、可测试、可演进的代码结构。高质量的关键，在于让复用逻辑具备明确边界、低耦合、高内聚、类型安全，并天然适配组件生命周期与响应式系统。
用 useXXX 命名约定组织组合式函数
所有可复用逻辑统一放在 src/composables/ 目录下，文件名和导出函数均以 use 开头，如 useUser、useValidation、usePage。这不仅是命名规范，更是语义契约：它表明该函数封装了**一组相关状态 + 行为 + 生命周期副作用**，且返回的是响应式数据与操作方法的组合。
- 每个
useXXX函数只解决一个领域问题，比如用户获取、表单校验、分页控制，不混杂 UI 渲染或路由跳转 - 函数内部避免直接访问
this或组件实例，所有依赖通过参数显式传入（如 API 方法、初始配置对象） - 返回值结构清晰，优先使用解构友好的对象，例如：
{ data, loading, error, fetch, reset }
封装时主动管理生命周期与副作用
组合式函数不是纯工具函数，它需要感知组件挂载、更新、卸载时机。高质量的复用逻辑会主动调用 onMounted、onBeforeUnmount 等钩子，而不是把副作用甩给使用者。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 数据初始化逻辑（如首次请求）放在
onMounted中，避免在函数定义时就触发异步操作 - 定时器、事件监听、WebSocket 连接等需清理的资源，在
onBeforeUnmount中统一释放 - 对
watch或computed的使用要克制——仅在真正需要响应式联动时才引入，避免无谓的依赖追踪开销
支持 TypeScript 类型推导与参数化配置
不带类型的组合式函数难以维护，也削弱了 IDE 提示与编译期检查能力。高质量的 useXXX 应做到开箱即用的类型安全。
- 函数签名明确标注泛型参数，例如
useUser<t extends user>(id: Ref<string>)</string></t> - 接收配置对象时，用
Partial或自定义接口约束可选字段，避免any或过度宽松的Record<string unknown></string> - 对外暴露的 ref、computed 和函数，其类型应由内部逻辑自然推导，不依赖类型断言
避免隐式状态共享，强调显式输入输出
多个组件共用同一个组合式函数时，必须保证彼此状态隔离。这是可维护性的底线。
- 不要在
useXXX内部维护全局单例状态（如直接修改const cache = new Map()），而应将缓存、配置等作为参数传入或通过provide/inject显式传递 - 当需要跨组件共享状态时，优先考虑
provide/inject配合readonly包装，而非让多个useXXX实例悄悄读写同一份响应式对象 - 对于“一次初始化、多处消费”的场景（如权限信息），可封装为
useAuth并配合createGlobalState（Pinia 或自定义）实现可控共享
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
