手撸vue3核心源码——响应式原理(ProxyRefs)

今天要实现的是ProxyRefs, 该工具函数在vue3中的使用场景比较多，也是很重要的一个地方，特别是在template模板解析中,我们的ref对象在template中使用不需要.value,这里就用到了ProxyRefs

目录

ProxyRefs初步实现

ProxyRefs完善

---

ProxyRefs初步实现

先来看一下单测要实现的功能, 这里我们先实现一下get功能, 我们可以看到这里的user对象里面包裹的有一个ref对象，我们这里取name时要实现不用.value,就可以拿到ref对象的值

   it("it test ProxyRefs", () => {
        const user = {
            name: ref("meng"),
            age: 18
        }

        const ProxyUser = ProxyRefs(user)
        expect(user.name.value).toBe("meng")
        expect(ProxyUser.name).toBe("meng")
        expect(ProxyUser.age).toBe(18)
    })

顺着思路来想

 我们一个对象里面只要有value为ref类型的key ,那么我们取的时候就不用.value,我们想想取的时候是不是要触发get操作，我们这里的proxyRefs也会将user转化成Proxy对象，那么我们在handler的get操作即可

export function ProxyRefs(objectWithRef) {
    return new Proxy(objectWithRef, {
        get(target, key) {
            const res = unRef(Reflect.get(target, key))
            return res
        }
    })
}

我们上一章实现了unRef也就是直接ref类型数据的值，这里刚好我们取出来值就是一个ref类型数据，然后给它做unRef处理就可以得到了

---

ProxyRefs完善

上面我们只做了get操作，接下来我们实现一下set操作，先来看一下单测,当我们修改了ProxyUser里面属性的值时，也会改变user的属性的值，并且对于改变的值若还是ref类型我们应该替换，如果不是了，那么我们应该对.value重新赋值了

it("it test ProxyRefs", () => {
        const user = {
            name: ref("meng"),
            age: 18
        }

        const ProxyUser = ProxyRefs(user)
        expect(user.name.value).toBe("meng")
        expect(ProxyUser.name).toBe("meng")
        expect(ProxyUser.age).toBe(18)

        ProxyUser.name = ref("chao")
        expect(ProxyUser.name).toBe("chao")
        expect(user.name.value).toBe("chao")

        ProxyUser.name = "40"
        expect(ProxyUser.name).toBe("40")
        expect(user.name.value).toBe("40")

    })

顺着思路写一下set操作,我们分了两种情况来写，我们修改后的值是一个ref还是普通的，对于ref我们进行覆盖也就是用Reflect.set方法，如果是普通的我们就对.value重新赋值

export function ProxyRefs(objectWithRef) {
    return new Proxy(objectWithRef, {
        get(target, key) {
            const res = unRef(Reflect.get(target, key))
            return res
        },
        set(target, key, value) {
            
            if (isRef(target[key]) && !isRef(value)) {
                return target[key].value = value
            } else {
                return Reflect.set(target, key, value)
            }
        }
    })
}

---

通过这样我们就可以得到一个PrxoxyRefs了，涉及到Proxy的其实操作都是一样的套路，分情况直接操作即可。