vue源碼解析系列－compute實現(xiàn)機(jī)制

Lsnsh 發(fā)布于2019-08-20 17:24 / 1766人閱讀

摘要：在看的實現(xiàn)之前。實現(xiàn)響應(yīng)式的關(guān)鍵有三個遍歷中的屬性。在方法中設(shè)置核心數(shù)據(jù)劫持每個屬性都有一個自己的消息訂閱起用于訂制該屬性上的所有觀察者觀察者，通過實現(xiàn)對響應(yīng)屬性的監(jiān)聽觀察。觀察得到結(jié)果后，主動觸發(fā)自己的回調(diào)可以去看看的這三部分源碼。

本來vue的響應(yīng)式應(yīng)該才是重中之重。但是網(wǎng)上的文章很多很多。在看computed的實現(xiàn)之前。肯定還是要把vue的響應(yīng)式如何實現(xiàn)好好看一下。或者說兩者根本就是一樣的東西。這邊推薦幾篇文章關(guān)于vue的響應(yīng)式。

vue響應(yīng)式簡單實現(xiàn)

vue慕課響應(yīng)式手記

還是看看官網(wǎng)對于響應(yīng)式的解釋：

總的來說。vue實現(xiàn)響應(yīng)式的關(guān)鍵有三個：watcher,dep,observe;

observe:遍歷data中的屬性。在get,set方法中設(shè)置核心數(shù)據(jù)劫持

dep：每個屬性都有一個自己的dep（消息訂閱起）用于訂制該屬性上的所有觀察者

watcher：觀察者，通過dep實現(xiàn)對響應(yīng)屬性的監(jiān)聽觀察。觀察得到結(jié)果后，主動觸發(fā)自己的回調(diào)

可以去看看vue2.3的這三部分源碼。中間還是有很多精美的設(shè)計。比如一個全局唯一的Dep.target，在任何時候都是唯一的值。以確保同一時間只有一個觀察者在訂閱。再比如，watcher中也會存下相關(guān)的訂閱器，實現(xiàn)去重和實現(xiàn)同一個觀察者的分組（這里是實現(xiàn)computed的關(guān)鍵），再如。watcher中的id也會唯一。用于異步更新的時候不同時出發(fā)相同的訂閱。仔細(xì)看看會收獲不小。改天我把所有的響應(yīng)式的代碼也整理一下。
在理解了響應(yīng)式的情況下。我們來看看computed的實現(xiàn)。最簡單的一個demo如下：



    



  {{computeA}}

我們來從源碼的角度看看發(fā)生了什么：

在初始化實例創(chuàng)建響應(yīng)式的時候。對options中的computed做了特殊處理：

function initComputed (vm, computed) {
  var watchers = vm._computedWatchers = Object.create(null);

  for (var key in computed) {
    var userDef = computed[key];
    var getter = typeof userDef === "function" ? userDef : userDef.get;
    {
      if (getter === undefined) {
        warn(
          ("No getter function has been defined for computed property "" + key + ""."),
          vm
        );
        getter = noop;
      }
    }
    // create internal watcher for the computed property.
    watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions);//為每一個computed項目訂制一個watcher

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef);
    } else {
      if (key in vm.$data) {
        warn(("The computed property "" + key + "" is already defined in data."), vm);
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(("The computed property "" + key + "" is already defined as a prop."), vm);
      }
    }
  

function defineComputed (target, key, userDef) {
  if (typeof userDef === "function") {
    sharedPropertyDefinition.get = createComputedGetter(key);
    sharedPropertyDefinition.set = noop;
  } else {
    sharedPropertyDefinition.get = userDef.get
      ? userDef.cache !== false
        ? createComputedGetter(key)
        : userDef.get
      : noop;
    sharedPropertyDefinition.set = userDef.set
      ? userDef.set
      : noop;
  }
  Object.defineProperty(target, key, sharedPropertyDefinition);
}

function createComputedGetter (key) {//構(gòu)造該computed的get函數(shù)
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate();//收集該watcher的訂閱
      }
      if (Dep.target) {
        watcher.depend();//同一為這一組訂閱再加上組件re-render的訂閱（該訂閱負(fù)責(zé)更新組件）
      }
      return watcher.value
    }
  }
}

總的來說。理解了響應(yīng)式的構(gòu)建之后。再來看computed的實現(xiàn)還是很直觀的。組件初始化的時候。computed項和data中的分別建立響應(yīng)式。data中的數(shù)據(jù)直接對屬性的get,set做數(shù)據(jù)攔截。而computed則建立一個新的watcher，在組件渲染的時候。先touch一下這個computed的getter函數(shù)。將這個watcher訂閱起來。這里相當(dāng)于這個computed的watcher訂閱了firstname和lastname。touch完后。Dep.target此時又變?yōu)橹澳莻€用于更新組件的。再通過watcher.depend()將這個組統(tǒng)一加上這個訂閱。這樣一旦firstname和lastname變了。同時會觸發(fā)兩個訂閱更新。其中一個便是更新組件。重新re-render的函數(shù)。感覺看的還不夠細(xì)啊