Vue 3中抽离复用逻辑的核心是将非UI、带状态或副作用的代码封装为以use开头的组合式函数（Composable），适用于管理响应式状态、依赖生命周期、涉及副作用或有状态流转的场景，需返回响应式状态与方法，避免UI操作和组件实例依赖。
Vue 3 单文件组件中抽离复用逻辑，核心是把和 UI 渲染无关、但带状态或副作用的代码，从 `<script setup>` 里移出去，封装成独立的组合式函数（Composable），再导入使用。</script>
哪些逻辑适合抽成 Composable
不是所有代码都要抽——只抽满足以下任一条件的逻辑：
- 需要维护响应式状态（比如 loading、list、formState）
- 依赖组件生命周期（比如页面加载时发请求、卸载前清理定时器或事件监听）
- 涉及副作用（如 localStorage 读写、addEventListener、resize 监听）
- 有状态流转过程（如防抖、节流、倒计时、错误重试、分页控制）
怎么写一个可用的 Composable
以封装列表请求为例，新建 composables/useListRequest.js：
- 函数名必须以 use 开头，比如 useListRequest
- 接收可配置参数（如 url、默认查询条件），不硬编码业务路径
- 用 ref 或 reactive 管理状态，保证响应性
- 在 onMounted 中触发首次请求，在 onUnmounted 中清理副作用
- 返回最小必要接口：状态 + 方法（如 fetchList、refresh）
在单文件组件中调用
在 `<script setup>` 中直接导入并解构：</script>
立即学习“前端免费学习笔记（深入）”；
- 变量天然响应式，模板中可直接使用（如 {{ list }}、{{ loading }}）
- 多个 Composable 可同时调用，互不干扰（如 useListRequest 和 useDarkMode）
- 解构时可重命名，避免命名冲突（如 const { list: userList } = useListRequest(...)）
注意避开常见误区
Composable 不是工具函数，也不是纯计算函数：
- 不要在函数内部写弹窗控制、样式切换等强 UI 相关逻辑——那是组件的职责
- 不要在 Composable 里访问 this 或组件实例，它应完全独立于具体组件
- 避免多个 Composable 之间循环调用；如需嵌套，保持单向依赖（例如 useFetch 内部调用 useLoading）
