Implement a simple data response system

class Dep{
  constructor() {
    this._subs = [];
  }
  depend() {
    this._subs.push(Dep.target)
  }
  notify() {
    this._subs.forEach(item => {
      item.fn();
    })
  }
}

// Actually, this is the beginning of the love between dep and watcher. // A global property is used in watcher to store watcher
Dep.target = null;

function pushTarget(watch) {
  Dep.target = watch;
}

function popTarget() {
  Dep.target = null;
}

// Convert to accessor property function defineReactive (obj, key, val, shallow) {

  // Create a dependency collection container let dep = new Dep();
  let childOb = !shallow && observe(val)

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      if(Dep.target) {
        // Collect dependencies dep.depend();
      }
      return val;
      // ...
    },
    set: function reactiveSetter (newVal) {
      if(newVal === val) return;
      // Continue recursively traversing observe(newVal);
      //Trigger dependency dep.notify();
      // ...
    }
  })
}

class Observer{
  constructor(data) {
    this.walk(data);
  }

  walk(data) {
    const keys = Object.keys(data)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(data, keys[i], data[keys[i]])
    }
  }
}

// Recursively convert all properties of the data object into accessor properties function observe (data) {
  if(Object.prototype.toString.call(data) !== '[object Object]') return;
  new Observer(data);
}

const data = {
  a: 1,
  b: 2
}

//First monitor an object observe(data);

class Watcher{
  /**
  * @params {Function} exp a property expression * @params {Function} fn callback */
  constructor(exp, fn) {
    this.exp = exp;
    this.fn = fn;

    //Save watcher
    // Dep.target = this;
    pushTarget(this);

    // Execute the expression function once first, and in the calling process,
    // Trigger the accessor of data.a, and the get of data.a is executed.
    // Trigger dep.depend() to start collecting dependencies this.exp();

    // Release Dep.target
    popTarget();
  }
}

// new Watcher Such a dependency is collected new Watcher(() => {
  return data.a + data.b;
}, () => {
  console.log('change')
})

data.a = 3; // change
data.b = 3; // change