前言

vue2 在开发的时候，es6 并未完全普及，因此 vue2 对对象的属性的变化监听采用了 es5 的 Object.defineProperty方法来实现。但是由于 Object.defineProperty的局限性，只能对对象已有的属性进行改造成 get / set实现监听，无法监听到对象的属性新增和属性删除操作。

在对象属性的 get 操作时进行依赖收集，在对象属性的 set 操作时进行依赖的触发。收集的依赖其实就是 Watcher 的实例。而且对象收集和建立 Watcher 二者之间本来毫无关系。是巧妙地让 Watcher 实例化的时候获取了值，触发 get 操作。get 就会知道要收集依赖了。但是这个依赖也就是 Watcher 实例是无法通过 get 的时候传递的，因此，vue 就在 Watcher 实例化的时候将自己放到了一个约定的地方，即window.target处，在触发 get 操作时会去该地方取依赖，即可完成依赖的收集。

实现

  1. class Dep {
  2.   constructor() {
  3.     // subs 是依赖，依赖就是 Watcher 的实例
  4.     this.subs = []
  5.   }
  7.   addSub(sub) {
  8.     this.subs.push(sub);
  9.   }
  11.   removeSub(sub) {
  12.     const index = this.subs.indexOf(sub);
  13.     if(index > -1) {
  14.       this.subs.splice(index, 1);
  15.     }
  16.   }
  18.   depend() {
  19.     if(window.target) {
  20.       this.addSub(window.target);
  21.     }
  22.   }
  24.   notify() {
  25.     // 遍历通知全部依赖
  26.     const subs = this.subs;
  27.     for(let i = 0; i < subs.length; i++) {
  28.       subs[i].update();
  29.     }
  30.   }
  31. }
  33. function defineReactive(data, key, val) {
  34.   // 对象嵌套时，递归子属性
  35.   if(typeof val === "object") {
  36.     new Observer(val);
  37.   }
  38.   let dep = new Dep();
  39.   Object.defineProperty(data, key, {
  40.     enumerable: true,
  41.     configurable: true,
  42.     get: function() {
  43.       // 收集依赖
  44.       dep.depend();
  45.       return val;
  46.     },
  47.     set: function (newVal) {
  48.       if(newVal === val) return;
  49.       val = newVal;
  50.       // 通知依赖
  51.       dep.notify();
  52.     }
  53.   })
  54. }
  56. class Watcher {
  57.   constructor(data, exp, cb) {
  58.     this.data = data;
  59.     // 执行 this.getter 就可以从 data 读取值
  60.     this.getter = this.parsePath(exp);
  61.     this.cb = cb;
  62.     // 获取依赖的实际值
  63.     this.value = this.get();
  64.   }
  66.   get() {
  67.     window.target = this;
  68.     let value = this.getter(this.data);
  69.     window.target = undefined;
  70.     return value;
  71.   }
  73.   update() {
  74.     const oldVal = this.value;
  75.     // 获取新的值，不会再收集一遍依赖，因为没有改变 window.target
  76.     this.value = this.getter(this.data);
  77.     this.cb(this.value, oldVal);
  78.   }
  80.   parsePath(path) {
  81.     const regex = /[^\w.&]/
  82.     if(regex.test(path)) return;
  83.     const keys = path.split(".");
  85.     return function(obj) {
  86.       for(let i = 0; i < keys.length; i++) {
  87.         if(!obj) return;
  88.         obj = obj[keys[i]];
  89.       }
  90.       return obj;
  91.     }
  92.   }
  93. }
  95. class Observer {
  96.   constructor(data) {
  97.     this.data = data;
  98.     if(!Array.isArray(this.data)) {
  99.       this.walk(this.data);
  100.     }
  101.   }
  103.   walk(obj) {
  104.     const keys = Object.keys(obj);
  105.     for(let i = 0; i < keys.length; i++) {
  106.       defineReactive(obj, keys[i], obj[keys[i]]);
  107.     }
  108.   }
  109. }

使用上述的变化侦测。

  1. const data = {
  2.   a: {
  3.     b: 123,
  4.     c: 456
  5.   }
  6. }
  8. new Observer(data);
  10. new Watcher(data, 'a.b', (val, oldVal) => {
  11.   console.log(`监听到 a.b 变化了，变化后的值为 ${val}，旧的值为 ${oldVal}`);
  12. })
  14. setTimeout(() => {
  15.   console.log("修改数据")
  16.   data.a.b = 789;
  17. }, 3000)