vue3 proxy实现简单响应式原理代码

    let activeEffect;
    const bucket = new WeakMap()
    const obj = new Proxy(data, {
            get(target, key) {
                // 将副作用函数activeEffect添加到存储副作用函数的桶中
                track(target, key)
                    // 返回属性值
                return target(key)
            },
            // 拦截设置操作
            set(target, key, newWal) {
                // 设置属性值
                target[key] = newWal
                    // 把副作用函数从桶里提取并执行
                trigger(target, key)
            }
        })
        // 在get拦截函数内调用track函数追踪变化
    function track(target, key) {
        if (!activeEffect) return

        let depsMap = bucket.get(target)

        if (!depsMap) {
            bucket.set(target, (depsMap = new Map()))
        }
        let deps = depsMap.get(key);
        if (!deps) {
            depsMap.set(key, (deps = new Set()))
        }
        deps.add(activeEffect)
    }
    // 在set拦截函数内调用trigger函数触发变化
    function trigger(target, key) {
        const depsMap = bucket.get(target)
        if (!depsMap) return
        const effects = depsMap.get(key)
        effects && effects.forEach(fn => fn());
    }