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 提供的一个全局方法，用于安装插件。其核心逻辑如下：

1. 检查插件是否已安装：避免重复安装。

2. 调用插件的 install 方法：如果插件是一个对象，必须提供 install 方法；如果插件是一个函数，则直接调用。

3. 传递 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!');

1. 应用场景

（1）观察者模式

• 适用于对象之间关系紧密的场景，例如：

  • GUI 事件处理（如按钮点击事件）。

  • 数据模型和视图之间的同步（如 MVC 模式）。

（2）发布-订阅模式

• 适用于对象之间关系松散或需要解耦的场景，例如：

  • 消息队列系统。

  • 跨组件通信（如 Vue 的全局事件总线）。

  • 微服务架构中的事件驱动通信。

---

2. 优缺点对比

（1）观察者模式

• 优点：

  • 实现简单，适合一对多的依赖关系。

  • 被观察者和观察者之间的通信是实时的。

• 缺点：

  • 被观察者和观察者之间是强耦合的，修改被观察者可能会影响观察者。

  • 如果观察者过多，通知所有观察者可能会影响性能。

（2）发布-订阅模式

• 优点：

  • 发布者和订阅者之间是松耦合的，易于扩展和维护。

  • 支持多对多的通信关系。

• 缺点：

  • 实现相对复杂，需要引入消息中心。

  • 消息中心可能会成为系统的性能瓶颈。

3.核心区别

（1）设计思想

• 观察者模式：强调 直接绑定 和 明确的关系。被观察者知道观察者的存在，并直接调用观察者的方法。

• 发布-订阅模式：强调 解耦 和 间接通信。发布者和订阅者不知道彼此的存在，它们通过消息中心进行通信。

（2）耦合度

• 观察者模式：被观察者和观察者之间是 强耦合 的。被观察者需要直接持有观察者的引用。

• 发布-订阅模式：发布者和订阅者之间是 松耦合 的。它们通过消息中心通信，彼此不直接依赖。

（3）适用场景

• 观察者模式：适合 直接绑定 的场景，例如数据模型和视图之间的同步。

• 发布-订阅模式：适合 解耦复杂系统 的场景，例如跨组件通信或事件驱动架构。