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的其实操作都是一样的套路，分情况直接操作即可。
