這段代碼出現(xiàn)在解析data屬性的時候，即調(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這個類的實例化對象，在實例化的時候，會傳入回調(diào)函數(shù)來執(zhí)行update，vue弄了一個隊列來執(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中實例化了Watcher，_update函數(shù)負責來更新

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
 });

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

圖片描述

觀察者模式

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

利用觀察者模式，在典型的ajax應用中，回調(diào)的處理邏輯可以不跟請求耦合在一塊，這樣邏輯上也會更加清晰。如下是一個簡單的發(fā)布/訂閱模式的實現(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);

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

怎么使用呢？

最后一個將不會打印出來，因為已經(jīng)取消訂閱了。

以上就是關于“Vue.js怎么實現(xiàn)監(jiān)聽”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。