vue源代码采用的设计模式分解

news2025/5/10 16:47:59

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】

在这里插入图片描述

Vue.js 源码中采用了多种设计模式，这些模式帮助 Vue 实现了其核心功能，并提高了代码的可维护性和扩展性。以下是一些在 Vue 源码中采用的设计模式及其具体应用示例：

1. 观察者模式 (Observer Pattern)

Vue 的响应式系统是基于观察者模式构建的。通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3），Vue 能够监听数据对象的变化并通知相关的视图组件进行更新。

示例：
在 Vue 2 中，使用 Object.defineProperty 来监听数据变化：

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter() {
            // 依赖收集逻辑
            return val;
        },
        set: function reactiveSetter(newVal) {
            if (newVal === val) return;
            val = newVal;
            // 触发更新逻辑
        }
    });
}

2. 发布/订阅模式 (Publish/Subscribe Pattern)

Vue 使用发布/订阅模式来处理自定义事件。组件可以通过 $emit 方法触发事件，其他部分可以使用 $on 来监听这些事件。

示例：
在父组件监听子组件的自定义事件：

// 子组件内
this.$emit('customEvent', data);

// 父组件内监听该事件
<ChildComponent @customEvent="handleCustomEvent" />
methods: {
    handleCustomEvent(data) {
        console.log(data);
    }
}

3. 工厂模式 (Factory Pattern)

Vue 在创建虚拟 DOM（VNode）时使用了工厂模式，以简化复杂虚拟节点的创建过程。

示例：
Vue 的 VNode 创建函数：

function createElement(tag, props, children) {
    return {
        tag: tag,
        props: props,
        children: children
    };
}

4. 组合模式 (Composite Pattern)

Vue 的组件系统允许你将多个组件组合在一起形成更复杂的用户界面，体现了组合模式的思想。

示例：

<!-- Parent.vue -->
<template>
  <div>
    <child-component></child-component>
    <another-child-component></another-child-component>
  </div>
</template>

5. 策略模式 (Strategy Pattern)

Vue 的编译器会根据不同的条件选择不同的优化策略或渲染逻辑，这是策略模式的应用。

示例：
Vue 根据是否支持某些特性来选择不同的编译策略。

6. 单例模式 (Singleton Pattern)

Vue 插件机制通常利用单例模式确保插件在整个应用程序中只有一个实例，提供全局访问点。

示例：
Vue.use() 方法用于注册插件，确保每个插件只会被初始化一次。

7. 装饰器模式 (Decorator Pattern)

虽然 JavaScript 原生不直接支持装饰器，但 Vue 的高阶组件（Higher-Order Components）或 mixins 可视为装饰器模式的一种实现方式，用来增强或修改组件的功能而不改变其原始结构。

示例：
使用 mixins 向组件添加额外的行为：

const myMixin = {
    created() {
        console.log('混入钩子函数');
    }
};
new Vue({
    mixins: [myMixin],
    created() {
        console.log('组件钩子函数');
    }
});