摘要：要想理解原理就得看源碼，最近網(wǎng)上也找了好多初始化方法個(gè)惡魔。。。因?yàn)橐彩茄驖u進(jìn)的理解，對(duì)計(jì)算屬性的初始化有幾處看得不是很明白，網(wǎng)上也都是含糊其辭的要想深入必須深入。。。

因?yàn)橐彩茄驖u進(jìn)的理解，對(duì)initComputed計(jì)算屬性的初始化有幾處看得不是很明白，網(wǎng)上也都是含糊其辭的（要想深入必須深入。。。），所以debug了好幾天，才算是有點(diǎn)頭緒，現(xiàn)在寫出來即幫自己再次理下思路，也可以讓大佬指出錯(cuò)誤

首先，基本的雙向綁定原理就不說了，可以去搜下相關(guān)教程，還是要先理解下簡單的例子

function initComputed (vm, computed) {
  console.log("%cinitComputed","font-size:20px;border:1px solid black")
  var watchers = vm._computedWatchers = Object.create(null);
  // computed properties are just getters during SSR
  var isSSR = isServerRendering();

  for (var key in computed) {
    var userDef = computed[key];
    var getter = typeof userDef === "function" ? userDef : userDef.get;
    if ("development" !== "production" && getter == null) {
      warn(
        ("Getter is missing for computed property "" + key + ""."),
        vm
      );
    }
    //minxing---console
    console.log("%cinitComputed 定義watchers[key]=new Watcher(vm getter noop computedWatcherOptions)","color:white;padding:5px;background:black");
   
    if (!isSSR) {
      // create internal watcher for the computed property.
      /**
      * 熟悉的newWatcher，創(chuàng)建一個(gè)訂閱者，為了之后收集依賴
      * 將例子中的num、lastNum和計(jì)算屬性comNum進(jìn)行綁定
      * 也就是說在一個(gè)deps中有兩個(gè)dep，其中的subs分別是
      * dep1.subs:[watcher(num),watcher(comNum)]
      * dep2.subs:[watcher(lastNum),watcher(comNum)]
      * dep3........
      * 請(qǐng)看前面的例子，頁面html中并沒有渲染{{lastNum}}；按理說就不會(huì)執(zhí)行l(wèi)astNum的getter
      * 從而就不會(huì)和計(jì)算屬性進(jìn)行關(guān)聯(lián)綁定，如果更改lastNum就不會(huì)觸發(fā)dep2的notify()發(fā)布
      * 自然也就不會(huì)在頁面看到comNum有所變化，但是運(yùn)行后卻不是這樣，為什么呢
      * 這就引出這個(gè)initComputed的下面方法了---依賴收集(watcher.prototype.depend)！
      * 當(dāng)時(shí)也是看了好久才知道這個(gè)depend方法的作用，后面再說
      * 首先先來提個(gè)頭，就是下面代碼中watcher中這個(gè)getter
      * 其實(shí)就是function comNum() {return this.num+"-computed-"+this.lastNum;}}
      * 而這個(gè)getter什么時(shí)候執(zhí)行呢，會(huì)在Watcher.prototype.evaluate()方法中執(zhí)行
      * 所以watcher中的evaluate()與depend()兩個(gè)方法都與initComputed相關(guān)
      */
      watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        computedWatcherOptions
      );
    }

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    // 經(jīng)過判斷后定義計(jì)算屬性---（關(guān)聯(lián)到vm的data上面）
    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);
      }
    }
  }
}

這個(gè)方法比較簡單主要就是將計(jì)算屬性綁定到vm上，重要的下面的createComputedGetter方法

function defineComputed (
  target,
  key,
  userDef
) {
  console.log("%cdefineComputed","font-size:20px;border:1px solid black")
  var shouldCache = !isServerRendering();
  if (typeof userDef === "function") {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : userDef;
    sharedPropertyDefinition.set = noop;
  } else {
    sharedPropertyDefinition.get = userDef.get
      ? shouldCache && userDef.cache !== false
        ? createComputedGetter(key)
        : userDef.get
      : noop;
    sharedPropertyDefinition.set = userDef.set
      ? userDef.set
      : noop;
  }
  if ("development" !== "production" &&
      sharedPropertyDefinition.set === noop) {
    sharedPropertyDefinition.set = function () {
      warn(
        ("Computed property "" + key + "" was assigned to but it has no setter."),
        this
      );
    };
  }
  Object.defineProperty(target, key, sharedPropertyDefinition);
}

function createComputedGetter (key) {
  console.log("createComputedGetter key",key);
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate();
      }
      if (Dep.target) {
        watcher.depend();
      }
      return watcher.value
    }
  }
}

function createComputedGetter (key) {
  console.log("createComputedGetter key",key);
  return function computedGetter () {
    var watcher = this._computedWatchers && this._computedWatchers[key];
    if (watcher) {
      if (watcher.dirty) {
        console.log("createComputedGetter watcher evaluate===========");
        //求值
        watcher.evaluate();
      }
      if (Dep.target) {
        console.log("createComputedGetter watcher depend===========");
        //依賴收集
        watcher.depend();
      }
      console.log("%ccreateComputedGetter watcher.value is","color:blue;font-size:40px",watcher.value);
      return watcher.value
    }
  }
}

為了更好的說明下，截兩張圖（都是基于最上面的html配置哦）

注釋掉watcher.depend()方法，此時(shí)deps中沒有dep：id4
其實(shí)dep：id4在內(nèi)存中已經(jīng)定義好了但是沒有加入到deps中（因?yàn)闆]有進(jìn)行依賴收集）
而dep：id5和id6就是上面的數(shù)組和遞歸數(shù)組中元素的dep

dep:id3 就是

這下是不是很清楚了

進(jìn)行依賴收集后的deps