实现vue3中的 reactivity 模块

111 阅读1分钟

实现 reactive

在 Vue3 中 reactive 会返回一个代理对象,并收集依赖,当代理对象的属性发生改变时,会触发依赖进行更新,在Vue3 中使用 ES6 里的 Proxy 来实现

实现 reactive 的核心逻辑

    function reactive (raw) {
        return new Proxy(raw, {
            get(target, key) {
                const res = Reflect.get(target, key)
                //TODO 收集依赖

                return res
            },
            set(target, key, value) {
                const res = Reflect.set(target, key, value)
                // TODO 触发依赖
                
                return res
            }
        })
    }

reactive 会返回一个 Proxy 代理对象,当获取属性的时候会在 getter 中收集依赖,并返回值,当设置属性的时候会在 setter 中触发依赖