实现vue3源码-shallowReadonly

shallowReadonly的功能其实就是浅层实现只读约束，做法也很简单

shallowReadonly

结语

shallowReadonly

期望值其实就是实现浅层约束

test('should not make non-reactive properties reactive', () => {
        const prop: any = shallowReadonly({n: { foo: 1}})
        expect(isReadonly(prop)).toBe(true)
        expect(isReadonly(prop.n)).toBe(false)
    })

shallowReadonly实现只需要在get里面实现判断就行了，再利用之前封装的createGetter

reactive.ts

export function shallowReadonly(raw) {
    return createActiveObject(raw, shallowReadonlyBaseHandlers) 
    // 用之前实现好的封装，在baseHandlers里写下shallowReadonlyBaseHandlers就行了
}

baseHandlers.ts

function createGetter(isReadonly = false, isShallowReadonly = false) {
    return function get(target, key) {
        const res = Reflect.get(target, key)

        // 判断是不是 reactive
        if (key === ReactiveFlags.IS_REACTIVE) {
            return !isReadonly
        } else if (key === ReactiveFlags.IS_READONLY) {
            return isReadonly
        }

        // 判断是不是shallowReadonly
        if (isShallowReadonly) return res

        // 判断是不是 对象
        if (isObject(res)) return isReadonly ? readonly(res) : reactive(res)

        // 依赖收集
        // 抽离公共，判断是否需要收集依赖<readonly>
        !isReadonly && track(target, key)
        return res
    }
}

// 用之前封装好的extend做一下处理
                           // export const extend = Object.assign
export const shallowReadonlyBaseHandlers = extend({}, readonlyBaseHandlers, {
    get: shallowReadonlyGet
})