vue中的设计模式

vue中使用了哪些设计模式

1. 观察者模式（Observer Pattern）

应用场景：Vue 的响应式系统核心就是观察者模式。
实现方式：通过 Object.defineProperty 或 Proxy 监听数据变化，当数据发生变化时，通知依赖的视图更新。

示例：

const data = { message: 'Hello' };
const vm = new Vue({
  data: data
});
// 修改 data.message 会触发视图更新
data.message = 'World';

2. 发布-订阅模式（Publish-Subscribe Pattern）

应用场景：Vue 的事件系统（$on, $emit）和全局事件总线（Event Bus）就是发布-订阅模式的实现。
实现方式：组件通过 $on 订阅事件，通过 $emit 发布事件。

示例：

// 组件 A
this.$emit('event-name', data);

// 组件 B
this.$on('event-name', (data) => {
  console.log(data);
});

3. 单例模式（Singleton Pattern）

应用场景：Vuex 的状态管理库和 Vue Router 的路由实例通常采用单例模式。
实现方式：确保全局只有一个实例，避免重复创建。

示例：

// Vuex Store
const store = new Vuex.Store({ /* 配置 */ });

// Vue Router
const router = new VueRouter({ /* 配置 */ });

4. 工厂模式（Factory Pattern）

应用场景：Vue 的组件系统可以看作是一种工厂模式。
实现方式：通过 Vue.component 或单文件组件（.vue 文件）创建可复用的组件。

示例：

Vue.component('my-component', {
  template: '<div>My Component</div>'
});

5. 插件模式

核心思想

扩展性：通过插件机制，允许第三方或开发者为框架添加新功能。
解耦：插件与框架核心代码分离，避免直接修改框架源码。
一致性：提供统一的插件安装和使用方式，简化开发流程。

插件模式-Vue.use 的实现原理

Vue.use 是 Vue.js 提供的一个全局方法，用于安装插件。其核心逻辑如下：

检查插件是否已安装：避免重复安装。
调用插件的 install 方法：如果插件是一个对象，必须提供 install 方法；如果插件是一个函数，则直接调用。
传递 Vue 构造函数：将 Vue 构造函数作为参数传递给插件的 install 方法，以便插件可以扩展 Vue 的功能。

源码示例（简化）：

Vue.use = function (plugin) {
  const installedPlugins = this._installedPlugins || (this._installedPlugins = []);
  if (installedPlugins.indexOf(plugin) > -1) {
    return this;
  }

  const args = Array.from(arguments).slice(1);
  args.unshift(this);

  if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args);
  } else if (typeof plugin === 'function') {
    plugin.apply(null, args);
  }

  installedPlugins.push(plugin);
  return this;
};

ElementUI 的插件实现

ElementUI 是一个基于 Vue.js 的 UI 组件库，它通过插件模式将自己注册到 Vue 中。以下是 ElementUI 插件的基本实现：

ElementUI 的 `install` 方法

ElementUI 提供了一个 install 方法，用于全局注册组件、指令和混入等。

示例（简化）：

const ElementUI = {
  install(Vue) {
    // 注册全局组件
    Vue.component('ElButton', Button);
    Vue.component('ElInput', Input);
    // 注册全局指令
    Vue.directive('focus', FocusDirective);
    // 添加全局混入
    Vue.mixin({
      created() {
        console.log('ElementUI plugin installed');
      }
    });
  }
};

使用 `Vue.use` 安装 ElementUI

通过 Vue.use(ElementUI)，ElementUI 的 install 方法会被调用，从而将组件、指令等注册到 Vue 中。

示例：

import Vue from 'vue';
import ElementUI from 'element-ui';

Vue.use(ElementUI);

插件模式的优势

模块化：将功能封装为插件，便于管理和复用。
灵活性：开发者可以根据需求选择安装不同的插件。
扩展性：框架的功能可以通过插件无限扩展，而无需修改核心代码。
一致性：提供统一的插件安装方式，降低学习成本。

5. 依赖注入模式（Dependency Injection Pattern）

应用场景：Vue 的 provide 和 inject 机制就是依赖注入模式的实现。
实现方式：父组件通过 provide 提供依赖，子组件通过 inject 注入依赖。

示例：

// 父组件
new Vue({
  provide: {
    message: 'Hello from parent'
  }
});

// 子组件
new Vue({
  inject: ['message'],
  created() {
    console.log(this.message); // 输出: Hello from parent
  }
});

手写发布订阅模式和观察者模式

分别用代码实现观察者模式与发布订阅模式

// 创建发布-订阅中心
const eventBus = {
  events: {},
  subscribe(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },
  publish(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => {
        callback(data);
      });
    }
  }
};

// 订阅者1
const subscriber1 = data => {
  console.log('Subscriber 1 received data:', data);
};

// 订阅者2
const subscriber2 = data => {
  console.log('Subscriber 2 received data:', data);
};

// 在发布-订阅中心订阅事件
eventBus.subscribe('event1', subscriber1);
eventBus.subscribe('event1', subscriber2);

// 在发布-订阅中心发布事件
eventBus.publish('event1', 'Hello, this is event data!');

// 输出：
// Subscriber 1 received data: Hello, this is event data!
// Subscriber 2 received data: Hello, this is event data!
// 定义被观察者
class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  notifyObservers(data) {
    this.observers.forEach(observer => {
      observer.update(data);
    });
  }
}

// 定义观察者
class Observer {
  update(data) {
    console.log('Observer received data:', data);
  }
}
// 定义观察者
class Observer2 {
  update(data) {
    console.log('Observer received data 2:', data);
  }
}

// 创建被观察者和观察者对象
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer2();

// 将观察者添加到被观察者的观察者列表中
subject.addObserver(observer1);
subject.addObserver(observer2);

// 被观察者通知观察者更新
subject.notifyObservers('Hello, this is update data!');