响应式原理基本代码

class Depend {
  constructor() {
    this.reactiveFns = [];
  }
  addDePend(reactiveFn) {
    this.reactiveFns.push(reactiveFn);
  }
  notify(receiver) {
    this.reactiveFns.forEach((fn) => fn(receiver));
  }
}

const depend = new Depend();

function wathcFn(fn) {
  depend.addDePend(fn);
}
wathcFn(function (receiver) {
  console.log(receiver);
  console.log("asd s ");
});
const obj = {
  name: "123",
  age: "11",
};

const objProxy = new Proxy(obj, {
  set: function (target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver);
    depend.notify(receiver);
  },
  get: function (target, key, receiver) {
    return Reflect.get(target, key);
  },
});
objProxy.name = "aa";
objProxy.name = "bbb";

{ name: 'aa', age: '11' }
asd s
{ name: 'bbb', age: '11' }
asd s