前言

观察者模式和发布订阅模式作为日常开发中经常使用到的模式，我一直不能做到很好的区分。最近在看Vue的源码，里面设计到了观察者模式，比较感兴趣，就去学习了下，这里做个总结吧。

一、发布订阅模式

什么是发布订阅模式？

基于一个事件中心，接收通知的对象是订阅者，需要先订阅某个事件，触发事件的对象是发布者，发布者通过触发事件，通知各个订阅者。

举例：比如平时订阅的微信公众号，这里就涉及到两个角色：公众号（事件中心）和订阅了公众号的用户（订阅者）。当公众号的作者发布了文章之后，订阅公众号的用户就会收到消息，这里又涉及到了一个角色：公众号的作者（发布者）.

应用场景

vue中的事件总线就是使用的发布订阅模式；它使用 $emit 、$on 进行兄弟组件通信，进行参数传递。

手动实现vue中的发布订阅模式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 中发布订阅模式</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>  // Vue 的实例，创建事件总线let bus = new Vue()// 订阅事件bus.$on('eventName1', val => {console.log('eventName1---->', val)})bus.$on('eventName2', val => {console.log('eventName2---->', val)})// 发布事件bus.$emit('eventName1', 'eventName1')bus.$emit('eventName2', 'eventName2')}</script>
</body>
</html>

打印结果：

在这里插入图片描述

在上述代码中，bus 就是我们创建的 事件总线，它是一个 Vue 实例。我们可以在不同的组件中引入这个实例，并使用 $on 方法来监听事件，使用 $emit 方法来触发事件。通过共享同一个事件总线实例，不同组件之间可以通过事件进行通信，实现解耦。

需要注意的是，使用事件总线模式时要确保在适当的时候 销毁 事件总线，以避免出现 内存泄漏 的问题。可以在组件的生命周期钩子中销毁事件总线：

beforeDestroy() {bus.$off();
}

二、观察者模式

1）什么是观察者模式？

目标者对象和观察者对象有相互依赖的关系，观察者对某个对象的状态进行观察，如果对象的状态发生改变，就会通知所有依赖这个对象的观察者进行更新操作。

观察者模式相比发布订阅模式少了个 事件中心 。

目标者对象【Subject】：是被观察的对象，它维护一组观察者，并提供用于 添加、删除和通知 观察者的方法。
观察者对象【Observe】：接收 Subject 状态变更通知并处理。
目标者对象【Subject】状态变更时，通知所有观察者对象【Observe】进行更新操作。

2）应用场景

观察者模式在Vue中应用场景：数据响应式变化。

在上一篇 Vue源码学习 - 数据响应式原理文章中已经了解到，每个响应式属性都有一个 dep实例，dep存放了依赖这个属性的 watcher（watcher是观测数据变化的函数），如果数据发生变化，dep 就会通知所有依赖它的观察者watcher 去调用更新方法。因此，观察者需要被目标对象收集，目的是通知依赖它的所有观察者。
为什么watcher中也要存放dep呢？原因是因为当前正在执行的 watcher 需要知道此时是哪个 dep 通知了自己。

3）vue中的观察者模式

观察者（订阅者） - Watcher

update()：当事件发生时，具体要做的事情。

目标者（发布者） - Dep

subs数组：存储所有的观察者。
addSub()：添加观察者。
removeSub()：移除观察者。
notify()：通知观察者；当事件发生后调用所有观察者的update()。

没有事件中心

手动实现观察者模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>观察者模式</title>
</head>
<body><script>// 目标者（发布者）class Dep {constructor () {// 记录所有的订阅者this.subs = []}// 添加订阅者addSub (sub) {if (sub && sub.update) {this.subs.push(sub)}}// 发布通知notify () {this.subs.forEach(sub => {sub.update()})}}// 观察者（订阅者）class Watcher {update () {console.log('update')}}//创建实例化对象 测试一下let dep = new Dep()let watcher = new Watcher()let watcher1 = new Watcher()// 添加订阅者dep.addSub(watcher)dep.addSub(watcher1)// 开启通知dep.notify()// 执行结果 update ---></script>
</body>
</html>