标准答案
- 好的 composable 通常有明确边界，例如请求状态、分页、弹窗控制、表单校验、权限判断或浏览器事件监听。
- 它应该显式接收参数、显式返回状态和操作方法，调用方能看出依赖和副作用。
- 纯函数工具不一定要写成 composable；只有需要 Vue 响应式、生命周期或副作用清理时，才更适合 useX 形式。
- 页面专属流程可以先留在页面内，等多个页面真的复用时再抽出 composable。
- 如果 composable 内部创建监听器、定时器、请求或 effect，要考虑组件卸载时清理。
题目解析
组合式函数的价值是复用有状态逻辑，而不是给所有函数加 use 前缀。
过大的 composable 会变成新的 mixin：调用方不知道它内部改了什么状态，触发了什么副作用。
拆分时可以按“状态所有权、生命周期、副作用、复用频率”判断，不要按文件行数机械拆分。
代码示例
下面的 usePagination 只处理分页状态和动作，边界比较清楚。
TypeScript
export function usePagination(initialPageSize = 20) {
const page = ref(1)
const pageSize = ref(initialPageSize)
function resetPage() {
page.value = 1
}
return {
page,
pageSize,
resetPage
}
}常见误区
- 把接口请求、表单状态、弹窗状态、权限判断全部放进一个 usePage 里。
- 把普通格式化函数也写成 composable，增加不必要的响应式和调用成本。
- 在 composable 里注册事件监听或定时器，但没有在组件卸载时清理。