36.Object.defineProperty和Reflect

1.使用Object.defineProperty方式
准备数据：

let person = {
  name: "hu",
  age: 15,
  hire: {
    color: "yellow",
  },
  children: [
    {
      name: "张三",
      age: 1,
    },
    {
      name: "李四",
      age: 5,
    },
  ],
};

将对象响应化

function isObject(obj) {
  let result =
    Object.prototype.toString.call(obj).indexOf("Array") != -1 ||
    Object.prototype.toString.call(obj).indexOf("Object") != -1
      ? true
      : false;
  return result;
}
//将object对象响应化
function ObserveObject(obj) {
  if (!isObject(obj)) return new Error("被监听的不是一个对象");
  for (let key in obj) {
    if (!isObject(obj[key])) {
      defineReactive(obj, key, obj[key]);
    } else {
      //监听
      key = ObserveObject(obj[key]);
    }
  }
}
//执行ObserveObject方法，将对象响应化处理
ObserveObject(person);

监听数组方法

let ArrayProto = Array.prototype;
let arrayMethod = Object.create(ArrayProto);
let originMethod = [];
["push"].forEach((method) => {
  let original = arrayMethod[method];
  originMethod[method] = function mutator() {
    console.log("监听到数组的变化啦！");
    return original.apply(this, arguments);
  };
});

劫持obj对象的属性

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`get ${key}:${val}`);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log(`set ${key}:${newVal}`);
        val = newVal;
        update();
      }
    },
  });
}

对象被劫持时调用更新操作方法

function update() {
  console.log("我被更新了");
}

测试数据

person.name = "piao";
let children = person.children;
children.__proto__ = originMethod;
children.push({ name: "王五", age: 1 });
console.log(person.name, person.hire.color);
console.log(person.children);

2.使用Reflect代理

let handler = {
  get(target, key, receiver) {
    // console.log("get", target, key);
    //懒监听，去获取的时候才监听对象里面的对象，而不是直接递归循环监听
    if (typeof target[key] === "object" && target[key] !== null) {
      return new Proxy(target[key], handler);
    }
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value) {
    // console.log("set", target, key, value);
    //数组新增会执行两次，一次是修改length，一次是添加值
    let oldValue = target[key];
    if (!oldValue) {
      //找不到老值，新增
    } else if (oldValue !== value) {
      //老值和新值不相等，修改
    }
    update();
    //为什么使用proxy就要用reflect?防止报错
    return Reflect.set(target, key, value);
  },
};

function update() {
  //在此可以
  // console.log("我被更新了");
}
//消息
let proxyPerson = new Proxy(person, handler);
proxyPerson.name = "piao";
let children = proxyPerson.children;
children.push({ name: "王五", age: 1 });
console.log("page", proxyPerson.page);

总结：
Object.defineProperty时vue3之前使用数据监听的方法，在set时进行对象劫持，劫持到更新之后调用update方法进行通知更新。监听数组更新的方法：重写数组方法，将原型上的方法重写。
Reflect是vue3使用的数据监听的方法。

• 反射的对象-将对象上原有的方法挂到reflect上，方便使用。
• 反射的方法-使用目标对象上的方法和之前的方法一样