function defineReactive(obj, key, val, customSetter, shallow){  //監(jiān)聽屬性key  //關(guān)鍵點：在閉包中聲明一個Dep實例，用于保存watcher實例  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實例)      if(Dep.target) {        //將dep放進(jìn)當(dāng)前觀察者的deps中，同時，將該觀察者放入dep中，等待變更通知        dep.depend();        if(childOb) {          //為子屬性進(jìn)行依賴收集          //其實就是將同一個watcher觀察者實例放進(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)鍵點：遍歷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是觀察者，這是全局唯一的，因為在任何時候只有一個觀察者被處理。Dep.target = null;//待處理的觀察者隊列var targetStack = [];function pushTarget(_target) {  //如果當(dāng)前有正在處理的觀察者，將他壓入待處理隊列  if(Dep.target) {    targetStack.push(Dep.target);  }  //將Dep.target指向需要處理的觀察者  Dep.target = _target;}function popTarget() {  //將Dep.target指向棧頂?shù)挠^察者，并將他移除隊列  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)屬于計算屬性watcher時為true    this.sync = !!options.sync; //標(biāo)記為同步計算，三大類型暫無  } 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)是計算watcher時，expOrFn是計算屬性的計算方法  // 當(dāng)是偵聽器watcher時，expOrFn是watch屬性的名字，this.cb就是watch的handler屬性    //對于渲染watcher和計算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)一個依賴改變的時候，通知它updateWatcher.prototype.update = function update() {  //三種watcher，只有計算屬性 watcher的lazy設(shè)置了true，表示啟用惰性求值  if(this.lazy) {    this.dirty = true;  } else if(this.sync) {    //標(biāo)記為同步計算的直接運(yùn)行run，三大類型暫無，所以基本會走下面的queueWatcher    this.run();  } else {    //將watcher推入觀察者隊列中，下一個tick時調(diào)用。    //也就是數(shù)據(jù)變化不是立即就去更新的，而是異步批量去更新的    queueWatcher(this);  }};//update執(zhí)行后，運(yùn)行回調(diào)cbWatcher.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);      }    }  }};//對于計算屬性，當(dāng)取值計算屬性時，發(fā)現(xiàn)計算屬性的watcher的dirty是true//說明數(shù)據(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();  }};