组合式函数（Composables）用于封装与UI无关、含状态和副作用的逻辑，需满足跨组件复用、响应式状态、生命周期或副作用三点；以use开头，命名规范，职责单一，支持TS类型与配置扩展，合理组合使用。
把组件内部逻辑抽出来做成组合式函数（Composables），核心是把“跟 UI 无关、但有状态、有副作用”的那部分代码单独封装，让它可复用、可测试、可维护。
明确哪些逻辑适合抽成 Composable
不是所有逻辑都该抽。重点看三点：是否跨组件复用、是否包含响应式状态、是否涉及生命周期或副作用。
- 需要响应式数据管理的逻辑，比如计数器、表单校验、倒计时
- 涉及浏览器 API 的副作用，比如监听系统主题、获取地理位置、监听页面滚动
- 封装通用异步流程，比如数据请求、防抖输入、错误重试
- 和业务强耦合、只在一个组件里用的逻辑，暂时不用抽——先写清楚，再重构
命名与结构要规范
以 use 开头，文件放在 src/composables/ 目录下，函数名体现职责，比如 useDarkMode、useDebounceInput、useFetch。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 函数内部用
ref、computed、watch等 Composition API 构建响应式能力 - 生命周期钩子（如
onMounted）显式调用，不隐藏在内部 - 返回值尽量解构清晰，避免嵌套过深；必要时用
toRefs或reactive包装对象 - 支持 TypeScript 类型推导，参数和返回值标注类型，尤其注意泛型（如
useFetch<User>）
关注单一职责与可配置性
一个 Composable 只解决一个问题，但要留出扩展点，方便不同场景复用。
立即学习“前端免费学习笔记（深入）”；
- 通过参数控制行为，比如
useFetch支持immediate、transform、onError - 避免硬编码 DOM 操作或路由跳转，把副作用外放为回调（
onSuccess、onCancel） - 需要清理的资源（如定时器、事件监听、AbortController）必须在
onUnmounted或watch变化时主动释放 - 初始状态优先从外部传入（
initialValue），而不是在函数内做 localStorage 或 API 请求判断
在组件中合理使用与组合
Composable 不是黑盒，它返回的是响应式变量和方法，直接解构使用即可，不需要额外包装。
- 多个 Composable 可以同时调用，互不干扰，比如
const { count, increment } = useCounter()和const { data, loading } = useFetch('/api/users') - 避免在 setup 中重复调用同一个 Composable 多次，除非确实需要多个独立实例
- 复杂逻辑可嵌套组合：比如
useAuth内部调用useLocalStorage和useFetch，但对外只暴露认证相关接口 - 调试时直接看函数名就知道逻辑来源，不再像 Mixins 那样“属性从哪来根本找不到”
