溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue響應式系統之observe、watcher、dep的源碼解析

發布時間:2020-08-19 18:32:55 來源:腳本之家 閱讀:170 作者:hfhan 欄目:web開發

Vue的響應式系統

Vue 最獨特的特性之一,是其非侵入性的響應式系統。數據模型僅僅是普通的JavaScript 對象,而當你修改它們時,視圖會進行更新,這使得狀態管理非常簡單直接,我們可以只關注數據本身,而不用手動處理數據到視圖的渲染,避免了繁瑣的 DOM 操作,提高了開發效率。

vue 的響應式系統依賴于三個重要的類:Dep 類、Watcher 類、Observer 類,然后使用發布訂閱模式的思想將他們揉合在一起(不了解發布訂閱模式的可以看我之前的文章發布訂閱模式與觀察者模式)。

vue響應式系統之observe、watcher、dep的源碼解析

Observer

Observe扮演的角色是發布者,他的主要作用是調用defineReactive函數,在defineReactive函數中使用Object.defineProperty 方法對對象的每一個子屬性進行數據劫持/監聽。

部分代碼展示

defineReactive函數,Observe的核心,劫持數據,在setter中向Dep(調度中心)添加觀察者,在getter中通知觀察者更新。

function defineReactive(obj, key, val, customSetter, shallow){
  //監聽屬性key
  //關鍵點:在閉包中聲明一個Dep實例,用于保存watcher實例
  var dep = new Dep();

  var getter = property && property.get;
  var setter = property && property.set;
  
  if(!getter && arguments.length === 2) {
    val = obj[key];
  }
  //執行observe,監聽屬性key所代表的值val的子屬性
  var childOb = observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      //獲取值
      var value = getter ? getter.call(obj) : val;
      //依賴收集:如果當前有活動的Dep.target(觀察者--watcher實例)
      if(Dep.target) {
        //將dep放進當前觀察者的deps中,同時,將該觀察者放入dep中,等待變更通知
        dep.depend();
        if(childOb) {
          //為子屬性進行依賴收集
          //其實就是將同一個watcher觀察者實例放進了兩個dep中
          //一個是正在本身閉包中的dep,另一個是子屬性的dep
          childOb.dep.depend();
        }
      }
      return value
    },
    set: function reactiveSetter(newVal) {
      //獲取value
      var value = getter ? getter.call(obj) : val;
      if(newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if(setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      //新的值需要重新進行observe,保證數據響應式
      childOb = observe(newVal);
      //關鍵點:遍歷dep.subs,通知所有的觀察者
      dep.notify();
    }
  });
}

Dep

Dep 扮演的角色是調度中心/訂閱器,主要的作用就是收集觀察者Watcher和通知觀察者目標更新。每個屬性擁有自己的消息訂閱器dep,用于存放所有訂閱了該屬性的觀察者對象,當數據發生改變時,會遍歷觀察者列表(dep.subs),通知所有的watch,讓訂閱者執行自己的update邏輯。

部分代碼展示

Dep的設計比較簡單,就是收集依賴,通知觀察者

//Dep構造函數
var Dep = function Dep() {
  this.id = uid++;
  this.subs = [];
};
//向dep的觀察者列表subs添加觀察者
Dep.prototype.addSub = function addSub(sub) {
  this.subs.push(sub);
};
//從dep的觀察者列表subs移除觀察者
Dep.prototype.removeSub = function removeSub(sub) {
  remove(this.subs, sub);
};
Dep.prototype.depend = function depend() {
  //依賴收集:如果當前有觀察者,將該dep放進當前觀察者的deps中
  //同時,將當前觀察者放入觀察者列表subs中
  if(Dep.target) {
    Dep.target.addDep(this);
  }
};
Dep.prototype.notify = function notify() {
  // 循環處理,運行每個觀察者的update接口
  var subs = this.subs.slice();
  for(var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
};

//Dep.target是觀察者,這是全局唯一的,因為在任何時候只有一個觀察者被處理。
Dep.target = null;
//待處理的觀察者隊列
var targetStack = [];

function pushTarget(_target) {
  //如果當前有正在處理的觀察者,將他壓入待處理隊列
  if(Dep.target) {
    targetStack.push(Dep.target);
  }
  //將Dep.target指向需要處理的觀察者
  Dep.target = _target;
}

function popTarget() {
  //將Dep.target指向棧頂的觀察者,并將他移除隊列
  Dep.target = targetStack.pop();
}

Watcher

Watcher扮演的角色是訂閱者/觀察者,他的主要作用是為觀察屬性提供回調函數以及收集依賴(如計算屬性computed,vue會把該屬性所依賴數據的dep添加到自身的deps中),當被觀察的值發生變化時,會接收到來自dep的通知,從而觸發回調函數。,

部分代碼展示

Watcher類的實現比較復雜,因為他的實例分為渲染 watcher(render-watcher)、計算屬性 watcher(computed-watcher)、偵聽器 watcher(normal-watcher)三種,
這三個實例分別是在三個函數中構建的:mountComponent 、initComputed和Vue.prototype.$watch。

normal-watcher:我們在組件鉤子函數watch 中定義的,都屬于這種類型,即只要監聽的屬性改變了,都會觸發定義好的回調函數,這類watch的expression是我們寫的回調函數的字符串形式。

computed-watcher:我們在組件鉤子函數computed中定義的,都屬于這種類型,每一個 computed 屬性,最后都會生成一個對應的 watcher 對象,但是這類 watcher 有個特點:當計算屬性依賴于其他數據時,屬性并不會立即重新計算,只有之后其他地方需要讀取屬性的時候,它才會真正計算,即具備 lazy(懶計算)特性。這類watch的expression是計算屬性中的屬性名。

render-watcher:每一個組件都會有一個 render-watcher, 當 data/computed 中的屬性改變的時候,會調用該 render-watcher 來更新組件的視圖。這類watch的expression是 function () {vm._update(vm._render(), hydrating);}。

除了功能上的區別,這三種 watcher 也有固定的執行順序,分別是:computed-render -> normal-watcher -> render-watcher。

這樣安排是有原因的,這樣就能盡可能的保證,在更新組件視圖的時候,computed 屬性已經是最新值了,如果 render-watcher 排在 computed-render 前面,就會導致頁面更新的時候 computed 值為舊數據。

這里我們只看其中一部分代碼

function Watcher(vm, expOrFn, cb, options, isRenderWatcher) {
  this.vm = vm;
  if(isRenderWatcher) {
    vm._watcher = this;
  }
  vm._watchers.push(this);
  // options
  if(options) {
    this.deep = !!options.deep; //是否啟用深度監聽
    this.user = !!options.user; //主要用于錯誤處理,偵聽器 watcher的 user為true,其他基本為false
    this.lazy = !!options.lazy; //惰性求職,當屬于計算屬性watcher時為true
    this.sync = !!options.sync; //標記為同步計算,三大類型暫無
  } else {
    this.deep = this.user = this.lazy = this.sync = false;
  }
  //初始化各種屬性和option
  
  //觀察者的回調
  //除了偵聽器 watcher外,其他大多為空函數
  this.cb = cb;
  this.id = ++uid$1; // uid for batching
  this.active = true;
  this.dirty = this.lazy; // for lazy watchers
  this.deps = [];
  this.newDeps = [];
  this.depIds = new _Set();
  this.newDepIds = new _Set();
  this.expression = expOrFn.toString();
  // 解析expOrFn,賦值給this.getter
  // 當是渲染watcher時,expOrFn是updateComponent,即重新渲染執行render(_update)
  // 當是計算watcher時,expOrFn是計算屬性的計算方法
  // 當是偵聽器watcher時,expOrFn是watch屬性的名字,this.cb就是watch的handler屬性
  
  //對于渲染watcher和計算watcher來說,expOrFn的值是一個函數,可以直接設置getter
  //對于偵聽器watcher來說,expOrFn是watch屬性的名字,會使用parsePath函數解析路徑,獲取組件上該屬性的值(運行getter)
  
  //依賴(訂閱目標)更新,執行update,會進行取值操作,運行watcher.getter,也就是expOrFn函數
  if(typeof expOrFn === 'function') {
    this.getter = expOrFn;
  } else {
    this.getter = parsePath(expOrFn);
  }
  this.value = this.lazy ? undefined : this.get();
};  
//取值操作
Watcher.prototype.get = function get() {
  //Dep.target設置為該觀察者
  pushTarget(this);
  var vm = this.vm;
  //取值
  var value = this.getter.call(vm, vm);
  //移除該觀察者
  popTarget();
  return value
};
Watcher.prototype.addDep = function addDep(dep) {
  var id = dep.id;
  if(!this.newDepIds.has(id)) {
    //為觀察者的deps添加依賴dep
    this.newDepIds.add(id);
    this.newDeps.push(dep);
    if(!this.depIds.has(id)) {
      //為dep添加該觀察者
      dep.addSub(this);
    }
  }
};
//當一個依賴改變的時候,通知它update
Watcher.prototype.update = function update() {
  //三種watcher,只有計算屬性 watcher的lazy設置了true,表示啟用惰性求值
  if(this.lazy) {
    this.dirty = true;
  } else if(this.sync) {
    //標記為同步計算的直接運行run,三大類型暫無,所以基本會走下面的queueWatcher
    this.run();
  } else {
    //將watcher推入觀察者隊列中,下一個tick時調用。
    //也就是數據變化不是立即就去更新的,而是異步批量去更新的
    queueWatcher(this);
  }
};

//update執行后,運行回調cb
Watcher.prototype.run = function run() {
  if(this.active) {
    var value = this.get();
    if(
      value !== this.value ||
      isObject(value) ||
      this.deep
    ) {
      var oldValue = this.value;
      this.value = value;
      //運行 cb 函數,這個函數就是之前傳入的watch中的handler回調函數
      if(this.user) {
        try {
          this.cb.call(this.vm, value, oldValue);
        } catch(e) {
          handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
        }
      } else {
        this.cb.call(this.vm, value, oldValue);
      }
    }
  }
};

//對于計算屬性,當取值計算屬性時,發現計算屬性的watcher的dirty是true
//說明數據不是最新的了,需要重新計算,這里就是重新計算計算屬性的值。
Watcher.prototype.evaluate = function evaluate() {
  this.value = this.get();
  this.dirty = false;
};

//收集依賴
Watcher.prototype.depend = function depend() {
  var this$1 = this;

  var i = this.deps.length;
  while(i--) {
    this$1.deps[i].depend();
  }
};

總結

Observe是對數據進行監聽,Dep是一個訂閱器,每一個被監聽的數據都有一個Dep實例,Dep實例里面存放了N多個訂閱者(觀察者)對象watcher。

被監聽的數據進行取值操作時(getter),如果存在Dep.target(某一個觀察者),則說明這個觀察者是依賴該數據的(如計算屬性中,計算某一屬性會用到其他已經被監聽的數據,就說該屬性依賴于其他屬性,會對其他屬性進行取值),就會把這個觀察者添加到該數據的訂閱器subs里面,留待后面數據變更時通知(會先通過觀察者id判斷訂閱器中是否已經存在該觀察者),同時該觀察者也會把該數據的訂閱器dep添加到自身deps中,方便其他地方使用。

被監聽的數據進行賦值操作時(setter)時,就會觸發dep.notify(),循環該數據訂閱器中的觀察者,進行更新操作。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女