vue 3逻辑复用需按功能归堆、职责封装、需要组合：横向切分模块、封装usexxx()函数、分层管理响应式状态、pinia协同全局状态。

Vue 3 的逻辑复用不是靠复制粘贴，而是靠“按功能归堆、按职责封装、按需要组合”。面对复杂业务（比如带权限控制的搜索表单、联动滑动+加载更多+状态缓存的视频流），关键不在于写多少代码，而在于让每一段逻辑只干一件事、只暴露必要接口、只依赖明确输入。

按功能边界横向切分

把混在同一个组件里的登录校验、关键词搜索、历史记录管理、结果分页等逻辑，各自独立成块。每个块内部包含它所需的 ref、computed、watch、onMounted 和方法，彼此不交叉引用变量。

• 用清晰注释或空行隔离，例如 // === 搜索模块 === 和 // === 权限校验模块 ===
• 模板中只调用语义化函数，如 search()、clearHistory()、checkPermission()，不直接操作底层响应式变量
• 避免一个函数横跨几十行去读另一个模块的 ref，否则后期改一处就容易漏掉关联逻辑

抽离为可复用的 Composable 函数

当多个页面都需要相似能力（比如统一的防抖搜索、带 loading/error 状态的数据请求、基于角色的按钮显隐控制），就把这部分逻辑封装成 useXxx() 函数，放在 composables/ 目录下。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 函数接收必要参数（如 API 路径、校验规则对象），返回响应式数据和操作函数，例如：{ data, loading, error, fetch, reset }
• 内部用 ref 或 reactive 管理状态，用 watch 处理副作用，不耦合具体组件结构
• 便于单元测试——只需 mock 参数，验证返回值和行为即可

分层管理状态粒度与响应节奏

复杂场景里状态不是“全响应”或“全静态”，要根据用途选对响应式工具：

• 用户输入的搜索词、筛选条件等，用 ref 精确控制更新粒度
• 结构较深的对象（如表单字段集合、嵌套配置项），用 reactive 更自然，但注意避免意外解构丢失响应性
• 计算派生值（如“是否可提交”“剩余字数”）用 computed，避免手动维护冗余状态
• 异步副作用（如滚动到底部触发加载）用 watch + immediate: false 控制触发时机，防止初始化时误执行

配合 Pinia 做跨组件状态协同

纯 Composable 解决不了全局共享状态问题。比如用户信息、主题偏好、当前 tab 等，适合交给 Pinia Store 管理。

• Composable 负责“局部交互逻辑”，Store 负责“跨区域状态事实源”
• 例如：useVideoPlayer() 只管播放/暂停/进度，用户是否已点赞、是否收藏，则从 useUserStore 中读取并更新
• 避免在多个 Composable 里重复调用同一 API，统一由 Store 的 action 封装请求逻辑

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