Vue3 proxy 数据响应式的简单实现

实现代码

 	      const obj = { a: 1, b: 2, c: { a: 1, b: 2, c: 3 }, d: [1, 2, 3] };

      const handler = {
        get: (target, key) => {
          console.log(`获取数据::::${key} = ${target[key]}`);
          if (typeof target[key] === "object") {
            return observe(target[key]);
          }
          return target[key]; // Reflect.get(target, key)
        },
        set: (target, key, value) => {
          console.log(`设置数据::::${key} === ${value}`);
          target[key] = value; // Reflect.set(target, key, value)
        },
      };

      const observe = (target) => {
        if (typeof target !== "object") {
          return target;
        }

        const obj = new Proxy(target, handler);
        return obj;
      };

      const proxyValue = observe(obj);

      console.log(proxyValue);

效果展示