Vue3响应式系统的核心是基于Proxy和Reflect的，它能够替代Vue2中的Object.defineProperty。
Proxy是ES6引入的一个新特性，它可以用来定义基本操作的自定义行为，比如属性查找、赋值、枚举、函数调用等。Reflect是ES6中新增的一个对象，它提供了一些静态方法，这些方法与Proxy中对应的 trap 方法一一对应，可以用来代替某些Object和Function的方法。
以下是一个简单的例子，展示如何使用Proxy来实现一个响应式对象：
const isObject = (obj) => obj === Object(obj);
const reactiveHandler = {
get(target, key, receiver) {
const result = Reflect.get(target, key, receiver);
console.log(`获取属性 ${String(key)}:`, result);
return isObject(result) ? new Proxy(result, reactiveHandler) : result;
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
console.log(`设置属性 ${String(key)} 从 ${oldValue} 到 ${value}`);
}
return result;
}
};
const createReactiveObject = (rawObject) => {
return new Proxy(rawObject, reactiveHandler);
};
// 使用Proxy创建响应式对象
const obj = {
name: 'Vue',
version: {
major: 3
}
};
const reactiveObj = createReactiveObject(obj);
// 测试
reactiveObj.name; // 获取属性 name: Vue
reactiveObj.version.major = 4; // 设置属性 major 从 3 到 4在这个例子中，我们定义了一个reactiveHandler，它实现了get和set trap，来监听对象属性的变化。然后我们定义了一个createReactiveObject函数，它接受一个普通对象并返回一个被Proxy包装过的响应式对象。
当你尝试读取或者设置响应式对象的属性时，Proxy会触发定义好的trap，并且在控制台打印出相应的日志信息。这个简单的例子展示了如何使用Proxy来创建一个具有响应式功能的对象。在Vue3中，这个逻辑被进一步扩展，以支持更复杂的数据结构和更多的响应式特性。