组合式函数是 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(() => {...})，也不会遗漏清理逻辑

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！