理解 vue3 里面的 reacttive

mvvm 里面的 vm 及数据和视图的绑定本质上是数据的变化会触发一个函数，这里怎么知道一个数据发生了变化呢？还有就是数据变化了需要更新那些视图（触发那些函数）呢？ vue2 使用了 defineProperty 进行数据劫持实现 vue3 使用了 es6 里面的 Proxy 来实现这里重点讨论一下 vue3 的实现 vue3 里面的响应式设计是基于 Proxy 的，通过 proxy 的 handler函数在 get 的时候收集依赖，在 set 的时候派发更新，那什么是 Proxy 呢？ Proxy 对象用于创建一个对象的代理，从而在访问对象的属性或方法时进行拦截和自定义操作。Proxy 对象是ES6中引入的一个重要特性，它提供了一种机制，可以在访问对象属性之前或之后执行自定义的行为

export const reactive = (obj) => {
    const target = obj;
    const proxy = new Proxy(target, {
        get(target, val) {
            console.log('[get]', target, val)
            return Reflect.get(target, key)
        },
        set(target, key, val) {
            console.log('[set]', target, key, val)
            return Reflect.set(target, key, val);
        }
    })
    return proxy;
}

这里就响应式设计的骨架，这里使用了 Reflect来操作对象，Reflect 也是一个内置对象，提供了很多对象操作方法，那这里为什么要用 Reflect 而不是直接操作对象呢

Reflect 的 get 和 set 方法与普通的属性访问和赋值操作非常相似，但它们提供了更多的控制和一致性
更好的性能：Reflect更加底层操作
统一的 API：Reflect 的方法与 Proxy 的陷阱一一对应
返回值的一致性：拦截的 set 和 get 里面需要返回一个布尔值，表示是否操作成功

理解 vue3 里面的 reacttive ​

理解 vue3 里面的 reacttive