眾所周知，vue2.x中的雙向綁定是通過Object.defineproperty 來劫持各個屬性的 setter,getter,在數(shù)據(jù)變動時發(fā)布消息給訂閱者,觸發(fā)響應(yīng)的監(jiān)聽回調(diào)，其中的核心類發(fā)布者Dep和觀察者Watcher就是通過觀察者模式實(shí)現(xiàn)的。
在觀察者模式Dep中有幾個屬性，subs是存放收集來的觀察者對象，addSub方法用來進(jìn)行依賴收集，然后調(diào)用notify方法下發(fā)通知，調(diào)用Watcher對象下的update方法

//發(fā)布者（目標(biāo)）
class Dep {
    constructor() {
       //存放觀察者對象
        this.subs = []
    }
    addSubs(sub) {
        //判斷參數(shù)是否存在，且收集來的觀察者需要有
        if (sub && sub.update) {
        //將觀察者對象添加到subs屬性下
            this.subs.push(sub)
        }
    }
    notify() {
        //在調(diào)用notify方法時下發(fā)同時，觸發(fā)subs中每個觀察者對象的update方法來觸發(fā)更新
        this.subs.forEach(sub => {
            sub.update()
        })
    }
};

觀察者對象Watcher下需要有一個update方法，這里可以做一些事情，用來更新數(shù)據(jù)等操作

// 觀察者（訂閱者）
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();//調(diào)用Watcher下的update方法，打印出一個'update'

對比觀察者模式跟發(fā)布訂閱模式

觀察者.png

總結(jié)下：

• 觀察者模式有具體的目標(biāo)調(diào)度，比如當(dāng)事件觸發(fā)，Dep就會調(diào)用觀察者的方法，所以觀察者模式的訂閱者和發(fā)布者是存在依賴的。
• 發(fā)布/訂閱模式是由統(tǒng)一的調(diào)度中心調(diào)用，因此發(fā)布者和訂閱者不需要知道對方的存在
  關(guān)于發(fā)布/訂閱模式的淺析在這里發(fā)布/訂閱模式淺析

還在學(xué)習(xí)路上，如果有錯誤之處也希望能得到指點(diǎn)

年華如果虛度，生命將毫無意義