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

前端不是渣男

已于 2023-07-25 13:21:56 修改

阅读量410

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-25 11:30:10 首次发布

本文链接：https://blog.csdn.net/qq_63204040/article/details/131902506

版权

文章介绍了如何在Vue3中实现ProxyRefs工具函数，以便在模板解析时无需使用.value就能访问ref对象的值。首先通过get操作实现取值，然后通过set操作处理值的修改，确保修改会影响到原对象，并适当地处理ref类型和非ref类型的值。

摘要由CSDN通过智能技术生成

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