Composition API逻辑抽离是提升Vue应用可复用性与健壮性的核心方案：通过封装useSearchFilter等以use开头的组合函数，集中管理响应式状态、computed计算与防抖方法，并在组件中导入调用，实现跨组件高效复用。
如果您正在开发 Vue 应用并希望提升组件的可复用性与架构健壮性，则可能面临 props 膨胀、逻辑耦合、跨层级通信低效等问题。以下是多种经过工程验证的组件封装技巧与高复用架构设计方案：
一、基于 Composition API 的逻辑抽离（Composable）
将组件中与 UI 解耦的响应式逻辑（如表单校验、搜索过滤、分页状态）封装为独立的 useXXX 函数，避免重复编写 setup 内容，确保逻辑在多个组件间真正共享且保持响应性。
1、在 composables/useSearchFilter.ts 中定义函数，接收 ref 类型的关键词和原始数据列表作为参数。
2、内部使用 computed 生成过滤后结果，并返回包含 filteredData、reset、debounceSearch 等方法的对象。
立即学习“前端免费学习笔记（深入）”；
3、在任意组件的 <script setup> 中导入并调用该函数，传入本地 ref 变量，不进行解构以保留响应性。
二、插槽驱动的内容分发架构
通过具名插槽与作用域插槽分离结构与内容，使组件仅负责容器逻辑与交互控制，渲染内容完全由父组件决定，极大增强定制自由度与复用场景覆盖范围。
1、在子组件模板中定义 <slot name="header"></slot> 和 <slot name="item" :item="item"></slot>。
2、父组件使用时，通过 v-slot:item="{ item }" 接收子组件传递的数据，并自定义每项渲染逻辑。
3、对无内容区域提供默认插槽 fallback，配合 v-if="$slots.default" 实现条件渲染分支。
三、Provide/Inject 构建跨层级通信链路
替代深层 prop drilling，允许祖先组件向任意深度后代注入响应式状态或方法，适用于主题切换、国际化上下文、权限配置等全局能力注入场景。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
1、在根组件或布局组件中调用 provide('appConfig', reactive({ theme: 'dark', locale: 'zh-CN' }))。
2、在任意嵌套子组件中使用 const config = inject('appConfig') 获取响应式对象。
3、若需触发更新，注入对象应为 reactive 或 ref，禁止直接修改 inject 返回值的引用。
四、高阶组件（HOC）模式封装通用行为
通过包装器组件为现有组件注入额外能力（如加载状态、错误边界、权限拦截），不侵入原组件实现，符合单一职责与开闭原则。
1、创建 WithLoading.vue 组件，接收 loading prop 与默认插槽。
2、内部根据 loading 状态渲染骨架屏或 <slot></slot>，并通过 v-bind="$attrs" 透传所有未声明的属性。
3、在业务组件中以 <WithLoading :loading="isLoading"><MyTable /></WithLoading> 方式使用。
五、基于 Pinia 的计算属性集中管理
当多个组件需共享同一套派生状态（如筛选后的用户列表、聚合统计值），应将计算逻辑移入 Pinia store，避免各组件重复执行相同 computed，消除状态不一致风险。
1、在 store 中定义 state 存储原始数据，使用 getters 封装过滤、排序、分组等计算逻辑。
2、getter 内部可依赖其他 getter 或响应式 state，自动触发依赖更新。
3、组件中通过 store.filteredUsers 直接消费结果，无需本地声明 computed。
