摘要：回顧上回提到，計(jì)算屬性的緩存與這個(gè)類的屬性有關(guān)，那么這次我們接著來看下，屬性到底取決于什么情況來變化，從而對(duì)進(jìn)行緩存。

上回提到，computed————計(jì)算屬性的緩存與Watcher這個(gè)類的dirty屬性有關(guān)，那么這次我們接著來看下，dirty屬性到底取決于什么情況來變化，從而對(duì)computed進(jìn)行緩存。

切入正題之前，我們先來看一個(gè)問題：如果一個(gè)computed的結(jié)果是受data屬性下的值影響的，那么如何去捕獲因某個(gè)值變化而引起的computed的變化？答案是：依賴收集

根據(jù)上面的斷點(diǎn)，在update函數(shù)執(zhí)行之前，我們注意到，有個(gè)reactiveSetter函數(shù)在它之前。我們點(diǎn)擊右側(cè)調(diào)用棧中的reactiveSetter，此時(shí)有一個(gè)函數(shù)特別醒目：defineReactive$$1，經(jīng)過又一次的斷點(diǎn)，我們發(fā)現(xiàn)它在幾處都有調(diào)用：

在initRender函數(shù)中調(diào)用

在walk函數(shù)中調(diào)用

在實(shí)際斷點(diǎn)調(diào)試的時(shí)候，我們很容易可以知道存在這樣的，同時(shí)也是與本文有關(guān)的調(diào)用順序（從下往上）：

defineReactive$$1

walk

Observer

observe

initData

initState

...

根據(jù)上邊提供的調(diào)用順序，我們重點(diǎn)看一下幾個(gè)關(guān)鍵的函數(shù)：

observe

/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
 */
function observe (value, asRootData) {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  var ob;
  if (hasOwn(value, "__ob__") && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value);
  }
  if (asRootData && ob) {
    ob.vmCount++;
  }
  return ob
}

光看注釋我們都能知道，observe函數(shù)的作用是：為某個(gè)值創(chuàng)建一個(gè)observer實(shí)例，隨后將這個(gè)observer實(shí)例返回，在這里起到一個(gè)對(duì)值進(jìn)行篩選的作用

Observer

/**
 * Observer class that is attached to each observed
 * object. Once attached, the observer converts the target
 * object"s property keys into getter/setters that
 * collect dependencies and dispatch updates.
 */
var Observer = function Observer (value) {
  this.value = value;
  this.dep = new Dep();
  this.vmCount = 0;
  def(value, "__ob__", this);
  if (Array.isArray(value)) {
    if (hasProto) {
      protoAugment(value, arrayMethods);
    } else {
      copyAugment(value, arrayMethods, arrayKeys);
    }
    this.observeArray(value);
  } else {
    this.walk(value);
  }
};

注釋大意：

每個(gè)被觀察的對(duì)象都附屬于Observer類。每次對(duì)對(duì)象的觀察都會(huì)將它的 getter和setter屬性覆蓋，用以收集依賴以及觸發(fā)更新

walk && defineReactive$$1

Observer.prototype.walk = function walk (obj) {
  var keys = Object.keys(obj);
  for (var i = 0; i < keys.length; i++) {
    defineReactive$$1(obj, keys[i]);
  }
};

/**
 * Define a reactive property on an Object.
 */
function defineReactive$$1 (
  obj,
  key,
  val,
  customSetter,
  shallow
) {
  var dep = new Dep();

  var property = Object.getOwnPropertyDescriptor(obj, key);
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  var getter = property && property.get;
  var setter = property && property.set;
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key];
  }

  var childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val;
      if (Dep.target) {
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val;
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== "production" && customSetter) {
        customSetter();
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) { return }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = !shallow && observe(newVal);
      dep.notify();
    }
  });
}

其中，這端代碼是關(guān)鍵：

get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val;
      if (Dep.target) {
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      return value
    },

如果閱讀了整段defineReactive$$1函數(shù)，那么很容易就發(fā)現(xiàn)，dep不過是Dep類new出來的實(shí)例，那么即使不看Dep.prototype.depend的實(shí)現(xiàn)，你也知道dep.depend()其實(shí)也就是在收集依賴。
另外，這段代碼意味著單單在data屬性下聲明一個(gè)變量是不會(huì)進(jìn)行依賴收集的，需要變量在程序中被調(diào)用，那么才會(huì)被收集到依賴中（其實(shí)這也是一種優(yōu)化）

附Dep類下的相關(guān)實(shí)現(xiàn)

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
var Dep = function Dep () {
  this.id = uid++;
  this.subs = [];
};

Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};

Dep.prototype.removeSub = function removeSub (sub) {
  remove(this.subs, sub);
};

Dep.prototype.depend = function depend () {
  if (Dep.target) {
    Dep.target.addDep(this);
  }
};

Dep.prototype.notify = function notify () {
  // stabilize the subscriber list first
  var subs = this.subs.slice();
  if (process.env.NODE_ENV !== "production" && !config.async) {
    // subs aren"t sorted in scheduler if not running async
    // we need to sort them now to make sure they fire in correct
    // order
    subs.sort(function (a, b) { return a.id - b.id; });
  }
  for (var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
};

上面說了這么多未免有點(diǎn)亂，最后重新梳理下computed實(shí)現(xiàn)緩存的思路：

Vue在初始化data屬性時(shí)，會(huì)將data屬性下相關(guān)的變量進(jìn)行觀察（observe），同時(shí)重新設(shè)置它的getter和setter屬性，以便在其被調(diào)用時(shí)收集到它的依賴。

初始化computed

調(diào)用computed時(shí)判斷this.dirty屬性，為true時(shí)調(diào)用evaluate重新計(jì)算它的值并將this.dirty置為false，將值存在this.value?上，再調(diào)用computed則直接返回this.value

當(dāng)computed中依賴的值發(fā)生變化時(shí)會(huì)自動(dòng)觸發(fā)該值的setter屬性，緊接著調(diào)用notify函數(shù)，遍歷一個(gè)subs數(shù)組，觸發(fā)update函數(shù)將this.dirty重置為true

當(dāng)computed再次被調(diào)用時(shí)，由于this.dirty已經(jīng)是true，則會(huì)重新計(jì)算

掃描下方的二維碼或搜索「tony老師的前端補(bǔ)習(xí)班」關(guān)注我的微信公眾號(hào)，那么就可以第一時(shí)間收到我的最新文章。