Watcher源码解析

Dep用于依赖收集和派发更新，它收集所有的订阅者，当有数据变动的时候，它会把消息通知到所有的订阅者，同时它也调用Watcher实列中的update方法，用于派发更新。

Watcher 用于初始化数据的watcher的实列。它原型上有一个update方法，用于派发更新。比如调用回调函数来更新页面等操作。

function Watcher (obj, expOrFn, cb) {
  this.obj = obj;
  this.expOrFn = expOrFn;
  this.cb = cb;
  // 如果expOrFn是事件函数的话
  if (typeof expOrFn === 'function') {
    this.getter = expOrFn;
  } else {
    this.getter = this.parseGetter(expOrFn);
  };
  // 触发getter，从而让Dep添加自己作为订阅者
  this.value = this.get();
}
Watcher.prototype.addDep = function(dep) {
  dep.addSub(this);
};
Watcher.prototype.update = function() {
  var value = this.get();
  var oldValue = this.value;
  if (oldValue === value) {
    return;
  }
  this.value = value;
  this.cb.call(this.obj, value, oldValue);
}
Watcher.prototype.get = function() {
  Dep.target = this;
  var value = this.getter.call(this.obj, this.obj);
  return value;
};
/*
 如下函数的作用：像vue中的 vm.$watch('xxx.yyy', function() {}); 这样的数据能监听到
 比如如下这样的data数据：
 var data = { 
   "name": "kongzhi",
   "age": 31,
   "user": {
    "name": "tugenhua"
   }
 };
 我们依次会把data对象中的 'name', 'age', 'user' 属性传递调用该函数。
 如果是 'name', 'age', 'user' 这样的，那么 exp 就等于这些值。因此：
 this.getter = this.parseGetter(expOrFn); 因此最后 this.getter 就返回了一个函数。
 当我们在 Watcher 类中执行 this.value = this.get(); 代码的时候 就会调用 getter方法，
 因此会自动执行 parseGetter 函数中返回的函数，参数为 data对象，该函数使用了一个闭包，闭包中保存的
 参数 exps 就是我们的 'name', 'age', 'user' 及 'user.name' 其中一个，然后依次执行。最后返回的值：
 obj = data['name'] 或 data['age'] 等等这些，因此会返回值value了。
*/
Watcher.prototype.parseGetter = function(exp) {
  var reg = /[^\w.$]/;
  if (reg.test(exp)) {
    return;
  }
  var exps = exp.split('.');
  return function(obj) {
    for (var i = 0, len = exps.length; i < len; i++) {
      if (!obj) {
        return;
      }
      obj = obj[exps[i]];
    }
    return obj;
  }
}

如上Watcher类，传入三个参数，obj 是一个对象属性，expOrFn 有可能是一个函数或者是其他类型，比如字符串等，cb是我们的回调函数，然后原型上分别有 addDep，update，get方法函数。

现在我们需要如下调用即可：

var data = { 
  "name": "kongzhi",
  "age": 31,
  "user": {
    "name": "tugenhua"
  }
};
// 初始化, 对data数据进行监听
new Observer(data);

// 变量data对象的所有属性，分别调用
Object.keys(data).forEach((key) => {
  if (data.hasOwnProperty(key)) {
    new Watcher(data, key, (newValue, oldValue) => {
      console.log('回调函数调用了');
      console.log('新值返回：' + newValue);
      console.log('旧值返回:' + oldValue);
    });
  }
});

watcher源码解析（完整）

function Watcher(vm, exp, cb) {
    //在watcher的实例上保存回调函数
    this.cb = cb; //用于更新界面的回调函数
    this.vm = vm; //MVVM的实例vm
    this.exp = exp; //对应的表达式
    this.depIds = {}; //n个相关的dep的容器
    this.value = this.get(); //初始化获取当前表达式对应的value
}

Watcher.prototype = {
    update: function() {
        this.run();
    },
    run: function() {
        var value = this.get();
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            //调用构建watcher实例的时候传递过来的回调函数,并且确定他的this指向为vm
            this.cb.call(this.vm, value, oldVal);
        }
    },
    //添加dep到watcher实例的depIds里
    addDep: function(dep) {
        //判断当前depIds中是否已经拥有了dep
        //当模版首次更新的时候都是没有的,需要添加,当页面数据发生改变的时候同时会调用此方法,但是depIds中已经拥有了当前的dep,所以就不用再添加了
        if (!this.depIds.hasOwnProperty(dep.id)) {
            //调用dep的addSub方法进行对watcher实例的添加
            dep.addSub(this);//此时this是watcher的实例
            //添加当前的dep到depIds中,并且把dep.id的值作为depIds的key
            this.depIds[dep.id] = dep;
        }
    },
    get: function() {
        //在watcher初始化的时候保存实例到Dep的target上
        Dep.target = this;
        //调用get方法获取当前对应表达式的数据
        var value = this.getVMVal();
        //清空target
        Dep.target = null;
        return value;
    },

    getVMVal: function() {
        var exp = this.exp.split('.');
        var val = this.vm._data;
        exp.forEach(function(k) {
            //读取_data中表达式所对应的值 (此时会触发observer中的get方法)
            val = val[k];
        });
        return val;
    }
};






// 1. 每次调用run()的时候会触发相应属性的getter
// getter里面会触发dep.depend()，继而触发这里的addDep
// 2. 假如相应属性的dep.id已经在当前watcher的depIds里，说明不是一个新的属性，仅仅是改变了其值而已
// 则不需要将当前watcher添加到该属性的dep里
// 3. 假如相应属性是新的属性，则将当前watcher添加到新属性的dep里
// 如通过 vm.child = {name: 'a'} 改变了 child.name 的值，child.name 就是个新属性
// 则需要将当前watcher(child.name)加入到新的 child.name 的dep里
// 因为此时 child.name 是个新值，之前的 setter、dep 都已经失效，如果不把 watcher 加入到新的 child.name 的dep中
// 通过 child.name = xxx 赋值的时候，对应的 watcher 就收不到通知，等于失效了
// 4. 每个子属性的watcher在添加到子属性的dep的同时，也会添加到父属性的dep
// 监听子属性的同时监听父属性的变更，这样，父属性改变时，子属性的watcher也能收到通知进行update
// 这一步是在 this.get() --> this.getVMVal() 里面完成，forEach时会从父级开始取值，间接调用了它的getter
// 触发了addDep(), 在整个forEach过程，当前wacher都会加入到每个父级过程属性的dep
// 例如：当前watcher的是'child.child.name', 那么child, child.child, child.child.name这三个属性的dep都会加入当前watcher