抽象工厂模式在 Vue 中用于统一管理成套组件家族，确保多主题、多平台或不同业务线下的组件协调兼容；它通过类型契约、组合式 API 和模块化实现，避免散落的创建逻辑与硬编码依赖。
抽象工厂模式在 Vue 组件开发中，核心作用是统一管理“成套出现、风格一致”的组件家族，比如多主题 UI、多平台适配或不同业务线的组件体系。它不解决单个按钮怎么渲染，而是确保“按钮 + 输入框 + 对话框 + 表单验证器”这一整套元素，在同一主题下协调工作、彼此兼容。
什么时候该用抽象工厂？
当你的组件系统出现以下情况时，抽象工厂就不是“可选”，而是“刚需”：
- 主题不止一种（如 light/dark/high-contrast），且每种主题下多个组件需保持视觉与行为一致性
- 同一功能在不同环境有不同实现（例如：Web 端用 Modal，小程序端用自定义弹窗，Electron 端调系统对话框）
- 组件之间存在隐式依赖（比如某款 Input 必须搭配特定的 ErrorBoundary 和 Label 才能正确校验和展示）
- 新增主题或平台时，发现要到处改 v-if、手动 import、逐个替换组件标签——说明创建逻辑已散落各处
Vue 3 中的关键实现结构
抽象工厂在 Vue 里不是靠 class 继承堆出来的，而是靠类型契约 + 组合式 API + 模块化导出自然落地：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
抽象产品：用 TypeScript 接口定义组件能力，例如
interface Button { render(): VNode; onClick(): void } -
具体产品：每个主题/平台对应一套组件实现，如
DarkButton.vue、MacDialog.vue，它们都满足上述接口 -
抽象工厂：一个函数或对象，只暴露
createButton()、createDialog()等方法，返回符合接口的实例或组件选项 -
具体工厂：例如
DarkThemeFactory或MacOSFactory，内部 import 并返回对应的具体组件 -
客户端使用：在 setup 中通过 inject 或 provide 获取当前工厂，调用其方法获得组件，再用
<component :is="button">渲染
比 if-else 更轻量的实际写法
不用写一堆 v-if，也不用动态 import 拼路径。一个典型组合方案是：
立即学习“前端免费学习笔记（深入）”；
- 用
provide('themeFactory', darkFactory)在根组件注入当前工厂 - 封装一个 composable，例如
useThemeComponents()，内部 inject 工厂并返回{ Button, Input, Dialog }等响应式组件引用 - 模板中直接
<Button />、<Input v-model="val" />—— 它们自动是当前主题下的实现 - 切换主题只需替换 provide 的 factory 实例，整个应用的组件族实时更新，无需重载页面
避免踩坑的几个细节
抽象工厂容易被误用为“高级 switch”，真正发挥价值需要守住几条线：
- 工厂返回的必须是“可互换的一组”，不能只造 Button 却让 Input 还是硬编码 —— 否则契约就断了
- 不要把样式变量（如 CSS 变量）和抽象工厂混为一谈；工厂管的是组件结构与行为，不是纯样式配置
- 工厂本身应无状态，不保存 theme 字符串，只根据注入的配置生成确定性产物
- 如果某个组件在所有主题下完全一样（比如 Icon），可单独导出，不必塞进工厂——抽象工厂管“差异”，不包办“共性”
