很多人感觉vue2的响应式其实用到了观察者+发布订阅。我们先来看一下简单的发布订阅的代码：
// 调度中心
class Dep {static subscribes = {}// 订阅所有需求static subscribe (key, demand) {// 对需求分类收集if (!Dep.subscribes[key]) Dep.subscribes[key] = []Dep.subscribes[key].push(demand)}// 对所有订阅者发布通知static publish (key, age) {if (!Dep.subscribes[key]) returnfor (const demand of Dep.subscribes[key]) {demand(age)}}}// 找对象的猎手类class Watcher {constructor (name, age) {this.name = name // 名字this.age = age // 年龄}// 订阅，由调度中心将猎手需求分类并存放到全局subscribe (key, demand) {Dep.subscribe(key, demand)}// 发布，由调度中心将同分类下的需求全部触发publish (key, age) {Dep.publish(key, age)}}// 猎手注册const aa = new Watcher('aa', 18)const bb = new Watcher('bb', 20)// 猎手订阅自己感兴趣的人aa.subscribe('key', function (age) {if (age === aa.age) console.log(`我是aa，我们都是${age}`)else console.log(`我是aa，我们年龄不同`)})bb.subscribe('key', function (age) {if (age === bb.age) console.log(`我是bb，我们都是${age}`)else console.log(`我是bb，我们年龄不同`)})// 红娘注册const red = new Watcher('red', 35)// 红娘发布信息red.publish('key', 20)// 我是aa，我们年龄不同// 我是bb，我们都是20
从上面中发现一个重要的点，发布者和订阅者是根据key值来区分的，然后通过消息中心来中转的，他们家是是实现不知道对方是谁。
而观察者模式中观察者是一开始就知道自己观察的是谁。
上面其实就是简易版的vue原理中发布订阅那段，我们接下来看完整过程。
Vue2 的响应式
- 创建一个 Observer 对象，它的主要作用是给对象的每个属性添加 getter 和 setter 方法。
- 在 getter 和 setter 方法中分别进行依赖的收集和派发更新。
- 创建 Watcher 对象，用于监听数据的变化，当数据发生任何变化时，Watcher 对象会触发自身的回调函数。
- 在模板解析阶段，对模板中使用到的数据进行依赖的收集，即收集 Watcher 对象。
- 当数据发生变化时，Observer 对象会通知 Dep 对象调用 Watcher 对象的回调函数进行更新操作，即派发更新。
- 更新完毕后，Vue2 会进行视图的重新渲染，从而实现响应式。
下面是一个基于 Object.defineProperty 实现响应式的示例，仅供参考：
function observe(obj) {if (!obj || typeof obj !== 'object') {return;}Object.keys(obj).forEach(key => {// 尝试递归处理observe(obj[key]);let val = obj[key];const dep = new Dep(); // 新建一个依赖Object.defineProperty(obj, key, {enumerable: true,configurable: true,get() {if (Dep.target) {dep.depend(); // 收集依赖}return val;},set(newVal) {if (newVal === val) {return;}val = newVal;dep.notify(); // 派发更新}});});
}// 依赖类
class Dep {constructor() {this.subs = [];}addSub(sub) {this.subs.push(sub);}removeSub(sub) {const index = this.subs.indexOf(sub);if (index !== -1) {this.subs.splice(index, 1);}}depend() {if (Dep.target) {Dep.target.addDep(this);}}notify() {this.subs.forEach(sub => sub.update());}
}Dep.target = null;// 观察者类
class Watcher {constructor(vm, expOrFn, callback) {this.vm = vm;this.getter = parsePath(expOrFn);this.callback = callback;this.value = this.get(); // 初始化，触发依赖}get() {Dep.target = this; // 设置当前依赖const value = this.getter.call(this.vm, this.vm); // 触发 getterDep.target = null; // 清除当前依赖return value;}addDep(dep) {dep.addSub(this);}update() {const oldValue = this.value;this.value = this.get(); // 重新获取this.callback.call(this.vm, this.value, oldValue); // 触发回调}
}// 解析路径
function parsePath(expOrFn) {if (typeof expOrFn === 'function') {return expOrFn;}const segments = expOrFn.split('.');return function(obj) {for (let i = 0; i < segments.length; i++) {if (!obj) {return;}obj = obj[segments[i]];}return obj;};
}// 测试
const obj = { foo: 'foo', bar: { a: 1 } };
observe(obj);
new Watcher(obj, 'foo', (val, oldVal) => {console.log(`foo changed from ${oldVal} to ${val}`);
});
new Watcher(obj, 'bar.a', (val, oldVal) => {console.log(`bar.a changed from ${oldVal} to ${val}`);
});obj.foo = 'FOO'; // 输出 `foo changed from foo to FOO`
obj.bar.a = 2; // 输出 `bar.a changed from 1 to 2`
以上代码中，函数 observe 用于递归遍历对象属性，把其进行劫持，包括收集依赖和派发更新；类 Dep 代表一个依赖，其中 addSub 用于添加订阅者实例，removeSub 用于移除订阅者实例，depend 用于收集依赖，即把当前依赖加到对应的订阅者中，notify 用于派发更新，即遍历所有订阅者，并触发其回调函数。类 Watcher 则代表一个订阅者，其中 getter 用于获取数据，callback 用于回调函数，addDep 用于添加依赖，即把当前订阅者添加到对应的依赖中，update 用于更新值，并触发相应的回调函数，如有必要。函数 parsePath 则用于解析路径字符串，返回对应属性的值。
例子中我们对对象 obj 进行了劫持，同时创建了两个观察者，分别对应 foo 和 bar.a 两个属性。当其中任意一个属性的值发生变化时，其对应的依赖都会被更新，从而触发其绑定的观订阅者的回调函数。
简单来说，在 Vue2 响应式系统中，当数据发生改变时，会触发 get 和 set 方法，get 方法会收集所有依赖该数据的 Watcher 对象，set 方法会通知 Dep 对象触发所有 Watcher 对象的回调函数进行更新。如此循环，实现了数据的响应式。
