关于vue的观察者模式的浅析

众所周知，vue2.x中的双向绑定是通过Object.defineproperty 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调，其中的核心类发布者Dep和观察者Watcher就是通过观察者模式实现的。
在观察者模式Dep中有几个属性，subs是存放收集来的观察者对象，addSub方法用来进行依赖收集，然后调用notify方法下发通知，调用Watcher对象下的update方法

//发布者（目标）
class Dep {
    constructor() {
       //存放观察者对象
        this.subs = []
    }
    addSubs(sub) {
        //判断参数是否存在，且收集来的观察者需要有
        if (sub && sub.update) {
        //将观察者对象添加到subs属性下
            this.subs.push(sub)
        }
    }
    notify() {
        //在调用notify方法时下发同时，触发subs中每个观察者对象的update方法来触发更新
        this.subs.forEach(sub => {
            sub.update()
        })
    }
};

观察者对象Watcher下需要有一个update方法，这里可以做一些事情，用来更新数据等操作

// 观察者（订阅者）
class Watcher {
    update() {
        console.log('update')
    }
};
const dep = new Dep();
const watcher = new Watcher();

简单做下测试

const dep = new Dep();
const watcher = new Watcher();
dep.addSubs(watcher);
dep.notify();//调用Watcher下的update方法，打印出一个'update'

对比观察者模式跟发布订阅模式

观察者.png

总结下：

• 观察者模式有具体的目标调度，比如当事件触发，Dep就会调用观察者的方法，所以观察者模式的订阅者和发布者是存在依赖的。
• 发布/订阅模式是由统一的调度中心调用，因此发布者和订阅者不需要知道对方的存在
  关于发布/订阅模式的浅析在这里发布/订阅模式浅析

还在学习路上，如果有错误之处也希望能得到指点

年华如果虚度，生命将毫无意义