proxy和Object.defineProperty

const obj = {
  a: 1,
  d: 2,
  c: {
    a: 1,
    b: 2,
  },
};
function _isObject(v) {
  return typeof v === "object" && v !== null;
}
function observe(obj) {
  for (const k in obj) {
    let v = obj[k];
    if (_isObject(v)) {
      observe(v);
    }
    Object.defineProperty(obj, k, {
      get() {
        console.log(k, "读取");
        return v;
      },
      set(val) {
        if (val !== v) {
          console.log(k, "更改");
          v = val;
          return v;
        }
      },
    });
  }
}

observe(obj);
// obj.a = 3;
obj.c.a = 5

// Object.defineProperty是对对象里的每一个属性一一进行监听，
// 就要深度遍历里面的所有属性,第一次观察后,再新增/删除属性，无法监听到
// Proxy是针对整个对象进行监听,产生新的代理对象进行监听