浅谈 Vue3 中的设计模式
设计模式是软件开发中的一种最佳实践，它提供了解决特定问题的通用解决方案。通过合理运用设计模式，可以提高代码的可维护性、可扩展性和可读性。在 Vue3 的源码中，设计模式被广泛应用于各个模块中，充分体现了其在现代前端框架中的重要性。
设计模式概述
设计模式通常分为三大类，每一类又包含若干具体模式：
- 创建型模式：关注对象的创建过程，旨在以灵活和可扩展的方式创建对象。
- 单例模式（Singleton Pattern）
- 工厂模式（Factory Pattern）
- 原型模式（Prototype Pattern）
- 建造者模式（Builder Pattern）
- 结构型模式：关注对象之间的组合，旨在通过组合对象来实现更大的功能。
- 适配器模式（Adapter Pattern）
- 装饰器模式（Decorator Pattern）
- 代理模式（Proxy Pattern）
- 外观模式（Facade Pattern）
- 行为型模式：关注对象之间的交互，旨在通过定义对象间的通信方式来实现复杂功能。
- 观察者模式（Observer Pattern）
- 策略模式（Strategy Pattern）
- 发布订阅模式（Publish-Subscribe Pattern）
- 状态模式（State Pattern）
以下我们将结合 Vue3 的源码，按照经典设计模式的分类和重要性，逐一分析其在框架中的应用。
单例模式（Singleton Pattern）
概述
单例模式确保一个类只有一个实例，并提供一个全局访问点。在 Vue3 中，单例模式被用于全局配置和核心模块的共享实例管理。
Vue3 中的实现
一个更直观的例子是 Vue3 的全局 API 管理，例如 createApp 方法返回的应用实例。无论在代码的哪个部分调用 getCurrentInstance，都能获取到当前组件的唯一实例：
import { getCurrentInstance } from 'vue';
export function useGlobalConfig() {
const instance = getCurrentInstance();
if (!instance) {
throw new Error('useGlobalConfig must be called within a setup function');
}
return instance.appContext.config.globalProperties;
}
在这个例子中：
getCurrentInstance确保每个组件在运行时只有一个唯一的上下文实例。- 通过单例模式，Vue3 的全局配置（如
globalProperties）可以被所有组件共享和访问，而无需重复创建。
这种设计保证了全局状态的唯一性，同时避免了重复实例化带来的资源浪费。
工厂模式（Factory Pattern）
概述
工厂模式通过定义一个接口来创建对象，而无需指定具体的类。在 Vue3 中，工厂模式被用于组件的创建和渲染。
Vue3 中的实现
Vue3 的虚拟 DOM 渲染器中使用了工厂模式。例如，createRenderer 函数通过工厂模式创建了一个渲染器实例：
function createRenderer(options) {
return {
render(vnode, container) {
// 渲染逻辑
},
hydrate(vnode, container) {
// 服务端渲染逻辑
}
};
}
const renderer = createRenderer({
createElement: () => { /* ... */ },
patchProp: () => { /* ... */ }
});
这种设计使得 Vue3 的渲染器可以灵活适配不同的平台（如浏览器、服务端、Weex 等）。
观察者模式（Observer Pattern）
概述
观察者模式定义了一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都会收到通知并自动更新。在 Vue3 的响应式系统中，watch 和 watchEffect 是观察者模式的典型实现。
Vue3 中的实现
watch 和 watchEffect 是 Vue3 提供的用于监听响应式数据变化的工具。以下是一个使用 watchEffect 的示例：
import { reactive, watchEffect } from 'vue';
const state = reactive({ count: 0 });
watchEffect(() => {
console.log(`Count is: ${state.count}`);
});
// 修改响应式数据
state.count++; // 输出：Count is: 1
state.count++; // 输出：Count is: 2
在这个例子中：
watchEffect会自动收集在其回调函数中访问的响应式数据（如state.count）。- 当响应式数据发生变化时，
watchEffect会重新运行回调函数，从而实现观察者模式的核心思想。
相比于手动依赖收集，watchEffect 提供了更高的开发效率和更简洁的代码形式，是 Vue3 响应式系统中观察者模式的一个重要应用。
发布订阅模式（Publish-Subscribe Pattern）
概述
发布订阅模式是一种消息传递机制，允许多个订阅者监听一个发布者的事件。在 Vue3 的源码中，发布订阅模式主要体现在响应式系统的依赖追踪和触发更新机制中。
Vue3 中的实现
在 Vue3 的响应式系统中，track 和 trigger 函数的设计体现了发布订阅模式。track 用于收集依赖，trigger 用于通知依赖更新：
let activeEffect;
function effect(fn) {
activeEffect = fn;
fn();
}
const targetMap = new WeakMap();
function track(target, key) {
let depsMap = targetMap.get(target);
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()));
}
let dep = depsMap.get(key);
if (!dep) {
depsMap.set(key, (dep = new Set()));
}
dep.add(activeEffect);
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const dep = depsMap.get(key);
if (dep) {
dep.forEach(effect => effect());
}
}
在这里，track 负责将依赖（订阅者）收集到 targetMap 中，而 trigger 则负责在数据变化时通知所有订阅者执行更新逻辑。这种设计完美体现了发布订阅模式的核心思想。
策略模式（Strategy Pattern）
概述
策略模式定义了一系列算法，并将每种算法封装起来，使它们可以互换。在 Vue3 中，策略模式被用于指令的生命周期钩子调用逻辑中。
Vue3 中的实现
在 Vue3 的指令系统中，不同的指令可能需要在不同的生命周期阶段执行特定的逻辑。Vue3 使用策略模式来处理这些钩子的调用：
const directiveHooks = {
beforeMount(el, binding, vnode) {
// beforeMount 钩子的逻辑
},
mounted(el, binding, vnode) {
// mounted 钩子的逻辑
},
beforeUpdate(el, binding, vnode, prevVnode) {
// beforeUpdate 钩子的逻辑
},
updated(el, binding, vnode, prevVnode) {
// updated 钩子的逻辑
},
beforeUnmount(el, binding, vnode) {
// beforeUnmount 钩子的逻辑
},
unmounted(el, binding, vnode) {
// unmounted 钩子的逻辑
}
};
function invokeDirectiveHook(hook, el, binding, vnode, prevVnode) {
const handler = directiveHooks[hook];
if (handler) {
handler(el, binding, vnode, prevVnode);
}
}
在这里：
directiveHooks定义了指令的所有生命周期钩子，每个钩子对应一个具体的实现。invokeDirectiveHook根据传入的钩子名称动态调用对应的逻辑。
这种设计使得指令的生命周期逻辑可以灵活扩展，同时避免了硬编码多个条件分支的复杂性，体现了策略模式的核心思想。
装饰器模式（Decorator Pattern）
概述
装饰器模式通过动态地为对象添加功能而不改变其结构。在 Vue3 中，装饰器模式被用于增强组件的功能。
Vue3 中的实现
Vue3 的指令系统（directives）可以看作是装饰器模式的一个应用。例如，自定义指令可以为 DOM 元素动态添加行为：
const app = Vue.createApp({});
app.directive('focus', {
mounted(el) {
el.focus();
}
});
通过这种设计，Vue3 实现了对 DOM 元素行为的动态扩展。
总结
Vue3 的源码中广泛应用了多种经典设计模式，包括单例模式、工厂模式、观察者模式、发布订阅模式、策略模式和装饰器模式等。这些设计模式不仅提高了框架的可维护性和可扩展性，还为开发者提供了学习和借鉴的优秀范例。通过深入理解这些设计模式及其在 Vue3 中的实现，高级前端开发者可以更好地掌握框架的设计思想，并将其应用到实际项目中。
→ 🐒