组合式函数是 Vue 3 封装可复用逻辑的核心，需将副作用与生命周期钩子（如 onMounted/onUnmounted）配对使用以实现资源闭环管理，配合 ref/reactive 管理响应式状态，并通过语义化 API 隐藏内部细节。
组合式函数在 Vue 3 中是封装可复用逻辑的核心方式，它天然适合把副作用（如事件监听、定时器、API 订阅）和生命周期绑定在一起——不是简单拼凑，而是让“资源创建 → 生命周期注册 → 清理回收”形成闭环。
副作用必须和生命周期配对注册
不能只加监听不清理，也不能在 setup 里直接执行副作用逻辑。Vue 的生命周期钩子（如 onMounted、onUnmounted）必须在组合式函数内部显式调用，确保行为与组件生命周期严格对齐。
- 监听窗口大小变化？在组合式函数里用 onMounted 绑定
window.addEventListener，再用 onUnmounted 移除 - 启动定时器轮询？onMounted 启动，onUnmounted 清除
clearInterval - 订阅 WebSocket 或第三方 SDK 实例？初始化放在 onMounted，断开或销毁操作写进 onUnmounted 的清理函数中
用 ref 或 reactive 管理副作用状态
副作用常伴随中间状态，比如 loading 标志、当前尺寸、连接状态等。这些应该用 ref 或 reactive 声明，保证响应式，并自然暴露给调用组件。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 返回一个包含
width: ref(0)和isConnected: ref(false)的对象，调用方能直接在模板中使用 - 避免在组合式函数里直接修改全局变量或闭包变量，否则无法触发视图更新
- 如果状态较复杂（如嵌套对象），优先用 reactive；若需解构或与
computed/watch配合，用 ref 更灵活
支持条件激活和依赖更新
不是所有副作用都该无条件运行。组合式函数可以接收参数（如开关标志、URL、配置项），并在内部结合 watch 或条件判断控制生命周期行为。
立即学习“前端免费学习笔记（深入）”；
- 例如
useFetch(url, { immediate: true })：当immediate为 true，就在 onMounted 发起请求；否则等待手动调用 - 监听某个 prop 变化，用 watch 触发重新连接 WebSocket，同时在 onBeforeUnmount 或 watch 的清理回调中关闭旧连接
- 避免在 onUpdated 里重复添加监听器——应先清理再注册，或用标志位控制
对外只暴露语义化 API，隐藏生命周期细节
好的组合式函数像一个“黑盒服务”：调用方只需关心“我要什么”，不用管“怎么挂载、怎么清理”。这是 Composition API 封装能力的关键体现。
- 函数名体现意图，比如
useWindowSize()、useOnlineStatus()、useScrollPosition() - 返回值聚焦业务数据和操作方法，例如：
{ width, height, refresh }，而不是暴露onMounted或事件监听器本身 - 内部生命周期钩子完全封装，调用方无需重复写
onMounted(() => {...})，也不会遗漏清理逻辑
