function defineReactive(obj, key, val, customSetter, shallow){
  //監(jiān)聽屬性key
  //關(guān)鍵點(diǎn)：在閉包中聲明一個Dep實(shí)例，用于保存watcher實(shí)例
  var dep = new Dep();

  var getter = property && property.get;
  var setter = property && property.set;
  
  if(!getter && arguments.length === 2) {
    val = obj[key];
  }
  //執(zhí)行observe，監(jiān)聽屬性key所代表的值val的子屬性
  var childOb = observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      //獲取值
      var value = getter ? getter.call(obj) : val;
      //依賴收集：如果當(dāng)前有活動的Dep.target(觀察者--watcher實(shí)例)
      if(Dep.target) {
        //將dep放進(jìn)當(dāng)前觀察者的deps中，同時，將該觀察者放入dep中，等待變更通知
        dep.depend();
        if(childOb) {
          //為子屬性進(jìn)行依賴收集
          //其實(shí)就是將同一個watcher觀察者實(shí)例放進(jìn)了兩個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;
      }
      //新的值需要重新進(jìn)行observe，保證數(shù)據(jù)響應(yīng)式
      childOb = observe(newVal);
      //關(guān)鍵點(diǎn)：遍歷dep.subs，通知所有的觀察者
      dep.notify();
    }
  });
}

//Dep構(gòu)造函數(shù)
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() {
  //依賴收集：如果當(dāng)前有觀察者，將該dep放進(jìn)當(dāng)前觀察者的deps中
  //同時，將當(dāng)前觀察者放入觀察者列表subs中
  if(Dep.target) {
    Dep.target.addDep(this);
  }
};
Dep.prototype.notify = function notify() {
  // 循環(huán)處理，運(yùn)行每個觀察者的update接口
  var subs = this.subs.slice();
  for(var i = 0, l = subs.length; i < l; i++) {
    subs[i].update();
  }
};

//Dep.target是觀察者，這是全局唯一的，因?yàn)樵谌魏螘r候只有一個觀察者被處理。
Dep.target = null;
//待處理的觀察者隊(duì)列
var targetStack = [];

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

function popTarget() {
  //將Dep.target指向棧頂?shù)挠^察者，并將他移除隊(duì)列
  Dep.target = targetStack.pop();
}

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; //是否啟用深度監(jiān)聽
    this.user = !!options.user; //主要用于錯誤處理，偵聽器 watcher的 user為true，其他基本為false
    this.lazy = !!options.lazy; //惰性求職，當(dāng)屬于計(jì)算屬性watcher時為true
    this.sync = !!options.sync; //標(biāo)記為同步計(jì)算，三大類型暫無
  } else {
    this.deep = this.user = this.lazy = this.sync = false;
  }
  //初始化各種屬性和option
  
  //觀察者的回調(diào)
  //除了偵聽器 watcher外，其他大多為空函數(shù)
  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
  // 當(dāng)是渲染watcher時，expOrFn是updateComponent，即重新渲染執(zhí)行render（_update）
  // 當(dāng)是計(jì)算watcher時，expOrFn是計(jì)算屬性的計(jì)算方法
  // 當(dāng)是偵聽器watcher時，expOrFn是watch屬性的名字，this.cb就是watch的handler屬性
  
  //對于渲染watcher和計(jì)算watcher來說，expOrFn的值是一個函數(shù)，可以直接設(shè)置getter
  //對于偵聽器watcher來說，expOrFn是watch屬性的名字，會使用parsePath函數(shù)解析路徑，獲取組件上該屬性的值（運(yùn)行g(shù)etter）
  
  //依賴（訂閱目標(biāo)）更新，執(zhí)行update，會進(jìn)行取值操作，運(yùn)行watcher.getter，也就是expOrFn函數(shù)
  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設(shè)置為該觀察者
  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);
    }
  }
};
//當(dāng)一個依賴改變的時候，通知它update
Watcher.prototype.update = function update() {
  //三種watcher，只有計(jì)算屬性 watcher的lazy設(shè)置了true，表示啟用惰性求值
  if(this.lazy) {
    this.dirty = true;
  } else if(this.sync) {
    //標(biāo)記為同步計(jì)算的直接運(yùn)行run，三大類型暫無，所以基本會走下面的queueWatcher
    this.run();
  } else {
    //將watcher推入觀察者隊(duì)列中，下一個tick時調(diào)用。
    //也就是數(shù)據(jù)變化不是立即就去更新的，而是異步批量去更新的
    queueWatcher(this);
  }
};

//update執(zhí)行后，運(yùn)行回調(diào)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;
      //運(yùn)行 cb 函數(shù)，這個函數(shù)就是之前傳入的watch中的handler回調(diào)函數(shù)
      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);
      }
    }
  }
};

//對于計(jì)算屬性，當(dāng)取值計(jì)算屬性時，發(fā)現(xiàn)計(jì)算屬性的watcher的dirty是true
//說明數(shù)據(jù)不是最新的了，需要重新計(jì)算，這里就是重新計(jì)算計(jì)算屬性的值。
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();
  }
};