GoF 设计模式总览
GoF 提出的 23 种设计模式遵循两大核心面向对象设计原则：
- 针对接口编程，而非针对实现编程
- 优先使用对象组合，而不是类继承
设计模式分为三大类：创建型、结构型、行为型。
1. 创建型模式（Creational Patterns）
目的：关注“对象的创建方式”，将对象的创建与使用解耦，降低耦合度。
就像我们买商品不关心其生产过程，创建型模式将“怎么创建对象”的细节交由特定类处理。
| 模式 | 简述 | Vue 使用场景 |
|---|---|---|
单例（Singleton） | 一个类只有一个实例，并提供全局访问点。 | Vuex store只有一个，通过this.$store访问 |
| 原型（Prototype） | 通过克隆原型对象来创建新对象，适用于对象创建成本高的场景。 | |
| 工厂方法（Factory Method） | 定义创建对象的接口，由子类决定实例化哪一个类。 | |
| 抽象工厂（Abstract Factory） | 提供创建一系列相关对象的接口（产品族）。 | |
建造者（Builder） | 将复杂对象构建过程拆分成多个步骤，逐步构建对象。 | Vue Router 链式路由配置（路由守卫） |
✅ 分类：
- 类创建型：工厂方法
- 对象创建型：单例、原型、抽象工厂、建造者
2. 结构型模式（Structural Patterns）
目的：描述如何组合类和对象以构建更大的结构，侧重类之间或对象之间的结构关系。
对象组合优于继承，体现了合成复用原则。
| 模式 | 简述 | Vue 使用场景 |
|---|---|---|
| 代理（Proxy） | 为对象提供代理控制访问，可添加权限校验、延迟加载等功能。 | |
| 适配器（Adapter） | 将一个接口转换为客户端期望的另一个接口，实现接口兼容。 | |
| 桥接（Bridge） | 将抽象部分与实现部分分离，使二者可以独立变化。 | |
外观（Facade） | 为复杂系统提供统一的对外接口，简化使用。 | Vue 选项式API |
组合（Composite） | 以树形结构组织对象，统一单个对象和组合对象的操作接口。 | Vue 组件化系统 |
装饰（Decorator） | 动态添加对象职责，比继承更灵活。 | Vue 指令系统（如 v-model）和混入（Mixins） |
| 享元（Flyweight） | 通过共享技术减少内存消耗，适合大量重复对象。 |
✅ 分类：
- 类结构型：适配器（类适配器）
- 对象结构型：其他全部（包括对象适配器）
3. 行为型模式（Behavioral Patterns）
目的：关注类或对象间的职责划分和协作方式，用于封装复杂的流程控制和行为变化。
| 模式 | 简述 | Vue 使用场景 |
|---|---|---|
| 模板方法（Template Method） | 定义算法框架，将部分步骤延迟到子类中实现。 | |
策略（Strategy） | 封装一系列算法，使它们可以互换并独立于使用者变化。 | Vue nextTick 异步更新策略是优雅降级 |
| 命令（Command） | 封装请求为对象，实现请求发送者与执行者的解耦。 | |
| 职责链（Chain of Responsibility） | 请求沿链传递，直到某个对象处理为止，降低请求发送者与处理者之间耦合。 | |
| 状态（State） | 对象行为随内部状态改变而改变。 | |
观察者（Observer） | 一对多依赖关系，主题状态变化通知所有观察者。 | Vue 响应式系统 |
| 中介者（Mediator） | 用中介对象封装对象间交互，减少耦合。 | |
| 迭代器（Iterator） | 提供顺序访问聚合对象元素的方法，隐藏内部结构。 | |
访问者（Visitor） | 在不修改对象结构的前提下定义新操作。 | |
| 备忘录（Memento） | 捕获并恢复对象内部状态，避免暴露内部实现。 | |
| 解释器（Interpreter） | 定义语言的文法和解释器，常用于规则表达式解析。 |
✅ 分类：
- 类行为型：模板方法、解释器
- 对象行为型：其他全部
总结图示
创建型（5）
├─ 单例 / 原型 / 抽象工厂 / 建造者（对象创建型）
└─ 工厂方法（类创建型）
结构型（7）
├─ 适配器（类结构型 + 对象结构型）
└─ 代理 / 桥接 / 外观 / 组合 / 装饰 / 享元 （对象结构型）
行为型（11）
├─ 模板方法 / 解释器（类行为型）
└─ 策略 / 命令 / 职责链 / 状态 / 观察者 / 中介者 / 迭代器 / 访问者 / 备忘录（对象行为型）
Vue 设计模式
Vue.js 并非单一对应某一种 GoF 模式，而是通过组合多种设计模式实现高效开发体验：
- 外观模式 简化复杂系统的使用。
- 组合模式 支持组件化架构。
- 装饰器模式 和 策略模式 提供灵活的功能扩展。
- 观察者模式 解决数据与视图同步问题。
这些模式的综合运用，使得 Vue 在代码复用、可维护性和扩展性上表现出色，符合设计模式“高内聚、低耦合”的核心原则。
