实现vue3源码-proxyRefs

proxyRefs的主要作用就是用在模板中，其他的都是些细枝末节，下面来实现吧

proxyRefs

结语

proxyRefs

测试

其实也就是ref替换和原始值赋值的测试

it('proxyRefs', () => {
        const user: any = {
            age: ref(10),
            name: '阿信'
        }
        const proxyUser: any = proxyRefs(user)
        expect(user.age.value).toBe(10)
        expect(proxyUser.age).toBe(10)
        expect(proxyUser.name).toBe('阿信')

        proxyUser.age = 20
        expect(proxyUser.age).toBe(20)
        expect(user.age.value).toBe(20)

        proxyUser.age = ref(10)
        expect(proxyUser.age).toBe(10)
        expect(user.age.value).toBe(10)

    })

实现

我这里其实把handlers抽离出去了，因为重复项不多，所以不抽离也可以的，直接写在ref.ts里也无伤大雅

// ref.ts
export function proxyRefs(raw) {
    return createActiveObject(raw, proxyRefsBaseHandlers)
}

// reactive.ts
export function createActiveObject(raw, beseHandlers = mutableHandlers) {
    return new Proxy(raw, beseHandlers)
}

// baseHandlers.ts
const proxyRefsGet = function get(target, key) {
    return unRef(Reflect.get(target, key))
}
const proxyRefsSet = function set(target, key, value) {
    if (isRef(Reflect.get(target, key)) && !isRef(value)) {
        return Reflect.get(target, key).value = value
    } else {
        return Reflect.set(target, key, value)
    }
}

export const proxyRefsBaseHandlers = {
    get: proxyRefsGet,
    set: proxyRefsSet
}

结语

整个实现也不是很难，主要是理清proxyRefs存在的意义以及它的功能是什么，思路对了什么就都对了，各位加油