Vue 3 逻辑复用怎么在组合式 API 中实现优雅的抽离-Vue.js-PHP中文网

Vue 3逻辑复用的核心是组合式函数（Composable），需内聚功能、自持状态、挂载生命周期；命名以use开头，内部隔离响应式状态、封装计算属性与侦听器，通过生命周期钩子管理副作用，支持多实例与TS类型提示。

vue 3 逻辑复用怎么在组合式 api 中实现优雅的抽离

Vue 3 中逻辑复用的优雅抽离，核心是把“功能内聚、状态自持、生命周期可挂载”的代码封装成 组合式函数（Composable），而不是简单地提取工具方法。它不是只导出一个函数，而是让这个函数能独立管理响应式状态、副作用和生命周期，同时保持调用无副作用、多次调用互不干扰。

命名与结构要规范

组合式函数统一以 use 开头（如 useCounter、useMousePosition），这是 Vue 社区约定，也便于 IDE 识别和 TypeScript 推导。函数内部应：

用 ref 或 reactive 创建专属响应式状态，不共享外部变量
把相关计算属性（computed）、方法（function）、侦听器（watch）一并定义在内部
通过 onMounted/onUnmounted 等钩子绑定组件生命周期，避免手动清理遗漏
最后 return 所有需暴露给组件的响应式值和方法，不返回内部实现细节

状态必须隔离，支持多实例复用

每个调用 useXxx() 的地方，都应获得一份独立的状态副本。例如：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

const a = useCounter() 和 const b = useCounter() 的 count 互不影响
不能在函数外声明 const count = ref(0) 再导出——那会变成单例，破坏复用性
如果需要配置参数（如初始值、API 地址），应在函数签名中接收，并用于初始化内部状态

副作用要可托管、可卸载

涉及事件监听、定时器、API 请求等副作用，不能裸写在函数体里。必须借助 Vue 生命周期钩子或 onScopeDispose 来自动清理：

监听全局事件（如 window.resize）时，用 onMounted 添加、onUnmounted 移除
使用 watch 或 effectScope 管理响应式依赖链，防止内存泄漏
异步请求建议配合 abortSignal 或取消令牌（如 useAsync 类库模式），确保组件卸载时请求可中断

类型友好，兼顾 TS 和 IDE 提示

组合式函数天然适合 TypeScript。推荐写法：

为返回对象添加明确的 interface 或 type，比如：interface UseCounterReturn { count: Ref; increment: () => void }
导出函数时标注完整返回类型：export function useCounter(): UseCounterReturn
参数支持默认值 + 类型推导，提升调用时的自动补全体验