vue3 proxy

// 创建一个 Vue 3 应用并使用 Proxy 进行数据响应式处理

import { createApp, reactive } from 'vue';

// 使用 Proxy 实现响应式对象
const state = reactive(new Proxy({
  message: 'Hello Vue 3!'
}, {
  // 拦截 get 操作
  get(target, key) {
    console.log(`Getting ${key}:`, target[key]);
    return target[key];
  },
  // 拦截 set 操作
  set(target, key, value) {
    console.log(`Setting ${key} to`, value);
    target[key] = value;
    return true;
  }
}));

// 创建 Vue 应用
const app = createApp({
  setup() {
    return { state };
  }
});

// 挂载应用
app.mount('#app');

解释说明：

1. 导入 Vue 3 核心模块：我们从 vue 中导入 createApp 和 reactive 函数。
2. 创建响应式对象：使用 reactive 函数将一个带有 Proxy 的对象转换为响应式对象。Proxy 对象用于拦截和自定义对目标对象的基本操作（如获取属性值、设置属性值等）。
3. 拦截器：
   • get 拦截器会在每次读取属性时触发，并记录访问的属性及其值。
   • set 拦截器会在每次设置属性值时触发，并记录修改的属性及其新值。
4. 创建并挂载 Vue 应用：通过 createApp 创建一个新的 Vue 应用实例，并在 setup 函数中返回响应式对象 state，最后将其挂载到 DOM 元素 #app 上。

这样，你就可以在 Vue 3 中使用 Proxy 来实现更复杂的响应式逻辑。