ts+vue3.0 如何用Proxy声明响应式对象

在 Vue 3 中，可以使用 ES6 的 Proxy 对象来声明响应式对象。通过使用 Proxy，可以更灵活地控制对象属性的访问和设置。

以下是一个使用 Proxy 声明响应式对象的示例代码：

import { reactive } from 'vue';

interface Person {
  name: string;
  age: number;
  gender: string;
}

const person: Person = new Proxy<Person>(reactive({
  name: "Tom",
  age: 18,
  gender: "male"
}), {
  get(target, key) {
    console.log(`getting ${key}`);
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    console.log(`setting ${key} to ${value}`);
    return Reflect.set(target, key, value);
  }
});

在以上代码中，使用了 reactive 函数使整个对象成为响应式，并使用 Proxy 对象来代理对象属性的访问和设置。在 get 和 set 方法中实现了自定义的响应式行为。

使用 Proxy 比起使用 Vue 提供的 API 需要实现更多的功能，但是使用 Proxy 可以更明确地表达代码的含义，并且更灵活地控制响应式对象的行为。

let tempObj: { [key: string]: any } = new Proxy({}, {})