Vue 3逻辑复用的核心是组合式函数（Composable），需内聚功能、自持状态、挂载生命周期；命名以use开头，内部隔离响应式状态、封装计算属性与侦听器，通过生命周期钩子管理副作用，支持多实例与TS类型提示。
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<number>; increment: () => void }</number> - 导出函数时标注完整返回类型：
export function useCounter(): UseCounterReturn - 参数支持默认值 + 类型推导，提升调用时的自动补全体验
