浅谈 Vue3 中的设计模式

设计模式是软件开发中的一种最佳实践，它提供了解决特定问题的通用解决方案。通过合理运用设计模式，可以提高代码的可维护性、可扩展性和可读性。在 Vue3 的源码中，设计模式被广泛应用于各个模块中，充分体现了其在现代前端框架中的重要性。

设计模式概述

设计模式通常分为三大类，每一类又包含若干具体模式：

1. 创建型模式：关注对象的创建过程，旨在以灵活和可扩展的方式创建对象。
   • 单例模式（Singleton Pattern）
   • 工厂模式（Factory Pattern）
   • 原型模式（Prototype Pattern）
   • 建造者模式（Builder Pattern）
2. 结构型模式：关注对象之间的组合，旨在通过组合对象来实现更大的功能。
   • 适配器模式（Adapter Pattern）
   • 装饰器模式（Decorator Pattern）
   • 代理模式（Proxy Pattern）
   • 外观模式（Facade Pattern）
3. 行为型模式：关注对象之间的交互，旨在通过定义对象间的通信方式来实现复杂功能。
   • 观察者模式（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;
}

在这个例子中：

1. getCurrentInstance 确保每个组件在运行时只有一个唯一的上下文实例。
2. 通过单例模式，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

在这个例子中：

1. watchEffect 会自动收集在其回调函数中访问的响应式数据（如 state.count）。
2. 当响应式数据发生变化时，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);
    }
}

在这里：

1. directiveHooks 定义了指令的所有生命周期钩子，每个钩子对应一个具体的实现。
2. invokeDirectiveHook 根据传入的钩子名称动态调用对应的逻辑。

这种设计使得指令的生命周期逻辑可以灵活扩展，同时避免了硬编码多个条件分支的复杂性，体现了策略模式的核心思想。

---

装饰器模式（Decorator Pattern）

概述

装饰器模式通过动态地为对象添加功能而不改变其结构。在 Vue3 中，装饰器模式被用于增强组件的功能。

Vue3 中的实现

Vue3 的指令系统（directives）可以看作是装饰器模式的一个应用。例如，自定义指令可以为 DOM 元素动态添加行为：

const app = Vue.createApp({});

app.directive('focus', {
     mounted(el) {
          el.focus();
     }
});

通过这种设计，Vue3 实现了对 DOM 元素行为的动态扩展。

---

总结

Vue3 的源码中广泛应用了多种经典设计模式，包括单例模式、工厂模式、观察者模式、发布订阅模式、策略模式和装饰器模式等。这些设计模式不仅提高了框架的可维护性和可扩展性，还为开发者提供了学习和借鉴的优秀范例。通过深入理解这些设计模式及其在 Vue3 中的实现，高级前端开发者可以更好地掌握框架的设计思想，并将其应用到实际项目中。

→ 🐒