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!');1. 应用场景
（1）观察者模式
-
适用于对象之间关系紧密的场景，例如：
-
GUI 事件处理（如按钮点击事件）。
-
数据模型和视图之间的同步（如 MVC 模式）。
-
（2）发布-订阅模式
-
适用于对象之间关系松散或需要解耦的场景，例如：
-
消息队列系统。
-
跨组件通信（如 Vue 的全局事件总线）。
-
微服务架构中的事件驱动通信。
-
2. 优缺点对比
（1）观察者模式
-
优点：
-
实现简单，适合一对多的依赖关系。
-
被观察者和观察者之间的通信是实时的。
-
-
缺点：
-
被观察者和观察者之间是强耦合的，修改被观察者可能会影响观察者。
-
如果观察者过多，通知所有观察者可能会影响性能。
-
（2）发布-订阅模式
-
优点：
-
发布者和订阅者之间是松耦合的，易于扩展和维护。
-
支持多对多的通信关系。
-
-
缺点：
-
实现相对复杂，需要引入消息中心。
-
消息中心可能会成为系统的性能瓶颈。
-
3.核心区别
（1）设计思想
-
观察者模式：强调 直接绑定 和 明确的关系。被观察者知道观察者的存在，并直接调用观察者的方法。
-
发布-订阅模式：强调 解耦 和 间接通信。发布者和订阅者不知道彼此的存在，它们通过消息中心进行通信。
（2）耦合度
-
观察者模式：被观察者和观察者之间是 强耦合 的。被观察者需要直接持有观察者的引用。
-
发布-订阅模式：发布者和订阅者之间是 松耦合 的。它们通过消息中心通信，彼此不直接依赖。
（3）适用场景
-
观察者模式：适合 直接绑定 的场景，例如数据模型和视图之间的同步。
-
发布-订阅模式：适合 解耦复杂系统 的场景，例如跨组件通信或事件驱动架构。
