Vue的响应式机制使用了观察者模式，所以我们首先要先了解一下观察者模式
观察者模式与发布订阅模式的区别是，观察者模式中没有事件中心，只有发布者与订阅者，并且发布者需要知道订阅者的存在。
观察者(订阅者)---Watcher
update(): 当事件发生时，具体要做的事情。
目标(发布者)--Dep
subs 数组：存储所有的观察者
addSub() 添加观察者，将其保存到subs数组中
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) {
//订阅者中必须有update方法
if (sub && sub.update) {
this.subs.push(sub);
}
}
//发布通知
notify() {
//遍历subs数组，调用每个订阅者中的update方法
this.subs.forEach((sub) => {
sub.update();
});
}
}
// 订阅者--观察者
class Watcher {
//必须有一update方法,当事件发生后，具体要做的事情
update() {
console.log("update something");
}
}
//测试
let dep = new Dep();
let watcher = new Watcher();
dep.addSub(watcher);
dep.notify();
</script>
</body>
</html>
下面我们看一下观察者模式与发布订阅模式的区别。
观察者模式：是由具体目标调度的，比如当事件触发，Dep就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。
发布订阅模式：由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。
