vue3响应式原理:Proxy + Reflect

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中，这个逻辑被进一步扩展，以支持更复杂的数据结构和更多的响应式特性。