Vue3 组合式函数设计复用逻辑之前先定义副作用一、组合式函数不是万能抽屉Vue3 Composition API 让逻辑复用更自然但也容易被滥用。很多项目把请求、状态、事件监听、路由跳转、缓存和副作用都塞进一个useXxx。短期看复用方便长期看很难测试和维护。组合式函数设计的关键是先定义它管理什么状态、产生什么副作用、由谁负责清理。复用逻辑之前要先把边界讲清楚。二、先区分纯状态和副作用flowchart TD A[组合式函数] -- B[纯状态计算] A -- C[请求副作用] A -- D[DOM/事件副作用] A -- E[路由副作用]纯状态计算适合封装成小函数副作用则要谨慎。比如usePagination可以只管理页码和大小useUserList如果直接请求接口就要处理 loading、error、取消请求和组件卸载。一个组合式函数最好只承担一类副作用。否则调用者很难预测它会做什么。三、接口要让调用者可控export function useAsyncStateT(loader: () PromiseT) { const data refT | null(null) const loading ref(false) const error refError | null(null) async function run() { loading.value true try { data.value await loader() } catch (e) { error.value e as Error } finally { loading.value false } } return { data, loading, error, run } }这个接口没有自动请求调用者决定什么时候执行。自动执行不是不能做但要通过参数明确。composable_design: expose_run_function: true support_manual_trigger: true cleanup_side_effects: required avoid_hidden_router_change: true隐藏路由跳转、隐藏全局状态写入是组合式函数最容易制造惊喜的地方。四、测试要覆盖生命周期组合式函数如果包含事件监听、定时器、请求取消就要测试组件卸载后的清理行为。只测返回值是不够的。还要控制命名。useUser太宽泛调用者不知道它是读用户、改用户还是监听用户变化。更具体的名字能减少误用。组合式函数还要考虑并发调用。同一个页面多次调用useAsyncState时状态是否共享缓存是否复用错误是否互相影响都要明确。默认每次调用独立通常比隐式共享更安全。type UseRequestOptions { immediate?: boolean cacheKey?: string abortOnUnmount?: boolean }如果支持缓存就要让调用者显式传cacheKey。没有 key 的缓存很容易串数据尤其是在用户切换、路由变化或参数变化时。还要处理请求竞态。用户快速切换筛选条件时旧请求可能晚于新请求返回。组合式函数可以用请求序号或 AbortController确保旧结果不会覆盖新状态。这些细节看起来琐碎但它们决定组合式逻辑是否能在真实页面里长期稳定。五、总结Vue3 组合式函数设计要先区分纯状态和副作用让调用者知道它会请求什么、监听什么、清理什么。可复用不是把代码搬到useXxx里而是让边界更清楚。