订阅者 Dep
首先实现一个订阅者Dep，它的主要作用是用来存放watcher观察者对象
class Dep {
constructor () {
/*用来存放watcher对象的数组*/
this.subs = [];
}
/*在subs中添加一个Watcher对象*/
addSub (sub) {
this.subs.push(sub);
}
/*通知所有watcher对象更新视图*/
notify () {
this.subs.forEach((sub) => {
sub.update();
});
}
}
观察者 Watcher
class Watcher {
constructor () {
/* 在new一个Watcher对象时将该对象赋值给Dep.target，在get中会用到 */
Dep.target = this;
}
/* 更新视图的方法 */
update () {
console.log('视图更新了');
}
}
Dep.target = null;
依赖收集
接下来修改一下defineReactive以及Vue的构造函数，来完成依赖收集。
function defineReactive(obj, key, val) {
const dep = new Dep();
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
/* 将Dep.target（即当前的Watcher对象存入dep的subs中） */
dep.addSub(Dep.target);
return val;
},
set: function reactiveSetter (newVal) {
if (newVal === val) {
return;
}
/* 在set的时候触发dep的notify来通知所有的Watcher对象更新视图 */
dep.notify();
}
});
}
class Vue {
constructor (options) {
this._data = options.data;
observer(this._data);
/* 新建一个Watcher观察者对象，这时候Dep.target会指向这个Watcher对象 */
new Watcher();
/* 在这里模拟render的过程，为了触发test属性的get函数 */
console.log('render', this._data.test);
}
}
小结
首先在observer的过程中会注册get方法，该方法用来进行依赖收集。在它的闭包中会有一个Dep对象，这个对象用来存放Watcher对象的实例。其实依赖收集的过程就是把watcher实例存放到对应的Dep对象中去。get方法可以让当前的watcher对象（Dep.target）存放到它的subs中（通过addSub方法）。在数据发生变化时，set会调用Dep对象的notify方法通知它内部的watcher对象进行视图更新。
