【源碼解析】Vue.js的監(jiān)聽實(shí)現(xiàn)

freewolf 發(fā)布于2019-08-21 13:50 / 1912人閱讀

摘要：這段代碼出現(xiàn)在解析屬性的時(shí)候，即調(diào)用方法配置的屬性。最終是周知訂閱者更新，那么上面的數(shù)據(jù)變更就是發(fā)布者。在指令中實(shí)例化了，函數(shù)負(fù)責(zé)來更新在解析模板的時(shí)候會(huì)解析，然后綁定，實(shí)例化，這樣模板就關(guān)聯(lián)在一起了。

本文地址： http://www.iamaddy.net/2016/1...

一說到監(jiān)聽，當(dāng)然就離不了設(shè)計(jì)模式中鼎鼎大名的觀察者模式。舉個(gè)例子，你家后院著火了，可一定要等到煙霧很大火光很亮你才能發(fā)現(xiàn)啊，可是當(dāng)你安裝了一個(gè)火災(zāi)預(yù)警器，當(dāng)發(fā)生火災(zāi)就立馬能夠通知到你了。這就是一個(gè)典型的觀察者模式。當(dāng)然也還有一些其他變種，比如發(fā)布/訂閱（publish/subscribe）模式。

我們知道如果要將數(shù)據(jù)和視圖關(guān)聯(lián)起來，在數(shù)據(jù)變更的時(shí)候，同步視圖，同理視圖變更，數(shù)據(jù)也發(fā)生變化。vue.js是怎么實(shí)現(xiàn)這個(gè)的呢？下面我們來揭開它的神秘面紗。
demo：



 
      {{ message }}

set: function reactiveSetter(newVal) {
  var value = getter ? getter.call(obj) : val;
  if (newVal === value) {
    return;
  }
  if (setter) {
    setter.call(obj, newVal);
  } else {
    val = newVal;
  }
  childOb = observe(newVal);
  dep.notify();
}

這段代碼出現(xiàn)在解析data屬性的時(shí)候，即調(diào)用Object.defineProperty方法配置data的屬性。一旦屬性發(fā)生變化，就notify發(fā)送廣播。

Dep.prototype.notify = function () {
  // stablize the subscriber list first
  var subs = toArray(this.subs);
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
};

notify 最終是周知subscribe（訂閱者）更新，那么上面的數(shù)據(jù)變更就是發(fā)布者。
subscribe是Watcher這個(gè)類的實(shí)例化對(duì)象，在實(shí)例化的時(shí)候，會(huì)傳入回調(diào)函數(shù)來執(zhí)行update，vue弄了一個(gè)隊(duì)列來執(zhí)行watcher的更新函數(shù)，具體可參考源碼。

Watcher.prototype.run = function () {
    ……
    if (value !== this.value || (isObject(value) || this.deep) && !this.shallow) {
      ……
      } else {
        this.cb.call(this.vm, value, oldValue);
      }
    }
    this.queued = this.shallow = false;
  }
 };

在Directive（指令）class中實(shí)例化了Watcher，_update函數(shù)負(fù)責(zé)來更新

var watcher = this._watcher = new Watcher(this.vm, this.expression, this._update, // callback
      {
        filters: this.filters,
        twoWay: this.twoWay,
        deep: this.deep,
        preProcess: preProcess,
        postProcess: postProcess,
        scope: this._scope
      });

在解析模板的時(shí)候會(huì)解析Directive，然后綁定，實(shí)例化watcher，這樣模板-data就關(guān)聯(lián)在一起了。

觀察者模式

林林總總的mvc或者mvvm框架基本也都是利用了觀察者模式，這個(gè)也非常有用，尤其在復(fù)雜的系統(tǒng)之中。

利用觀察者模式，在典型的ajax應(yīng)用中，回調(diào)的處理邏輯可以不跟請(qǐng)求耦合在一塊，這樣邏輯上也會(huì)更加清晰。如下是一個(gè)簡單的發(fā)布/訂閱模式的實(shí)現(xiàn)

var PubSub = {};
(function (q) {
    var topics = {}, subUid = -1;
    q.publish = function (topic) {
        if(!topics[topic]){
            return false;
        }

        var subscribers = topics[topic],
            len = subscribers ? subscribers.length : 0;

        while(len--){
            var args = Array.prototype.slice.call(arguments, 1);
            args.unshift(topic);
            subscribers[len].callback.apply(this, args);
        }
        return this;
    };

    q.subscribe = function (topic, callback) {
        if(!topics[topic]){
            topics[topic] = [];
        }

        var subuid = (++subUid).toString();

        topics[topic].push({
            token: subuid,
            callback: callback
        });

        return subuid;
    };

    q.unsubscribe = function (subid) {
        for(var k in topics){
            if(topics[k]){
                for(var i = 0, j = topics[k].length; i < j; i++){
                    if(topics[k][i].token === subid){
                        topics[k].splice(i, 1);
                        return subid;
                    }
                }
            }
        }
        return this;
    };
})(PubSub);

這就是一個(gè)簡單的訂閱發(fā)布系統(tǒng)，每注冊(cè)一個(gè)訂閱者，其實(shí)就是將其回調(diào)處理的callback保存在一個(gè)字典對(duì)象的數(shù)組中，字典對(duì)象的key值可以隨意定義，只要與發(fā)布時(shí)的key對(duì)應(yīng)起來就好。怎么使用呢？

最后一個(gè)將不會(huì)打印出來，因?yàn)橐呀?jīng)取消訂閱了。