Vue3使用Proxy实现数据监听的原因分析

class Observer {
    constructor(data) {
      // 遍历参数 data 的属性，给添加到 this 上
      for (let key of Object.keys(data)) {
        if (typeof data[key] === "object") {
          data[key] = new Observer(data[key]);
        }
        Object.defineProperty(this, key, {
          enumerable: true,
          configurable: true,
          get() {
            console.log("你访问了" + key);//你访问了age
            return data[key];//20
          },
          set(newVal) {
            console.log("你设置了" + key); //你设置了age
            console.log("新的" + key + "=" + newVal); //新的age=20
            if (newVal === data[key]) {
              return;
            }
            data[key] = newVal;
          }
        });
      }
    }
  }const obj = {
    name: "app",
    age: "18",
    a: {
      b: 1,
      c: 2,
    }
  };const app = new Observer(obj);app.age = 20;console.log(app.age);app.newPropKey = "新属性";console.log(app.newPropKey);    //新属性

const obj = {
  name: "krry",
  age: 24,
  others: {
    mobile: "mi10",
    watch: "mi4",
  },};const p = new Proxy(obj, {
  get(target, key, receiver) {
    console.log("查看的属性为：" + key);  
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log("设置的属性为：" + key); 
    console.log("新的属性：" + key, "值为：" + value); 
    Reflect.set(target, key, value, receiver);
  },});p.age = 22;console.log(p.age); p.single = "NO";console.log(p.single);p.others.shoe = "boost";console.log(p.others.shoe);输出结果为:设置的属性为：age
新的属性：age 值为：22查看的属性为：age22

设置的属性为：single
新的属性：single 值为：NO查看的属性为：singleNO 查看的属性为：others
查看的属性为：others
boost

Object.defineProperty(data, 'count', {
  get() {},
  set() {},})

new Proxy(data, {
  get(key) { },
  set(key, value) { },})