实现shallowReactive 与 reactive

let reactiveHandle = {
    // 读取某个属性
    get(target,prop){
        if(prop === '_is_reactive') return true
        console.log('读取get方法',prop)
        const result = Reflect.get(target,prop)
        return result
    },
    // 修改某个属性或值
    set(target,prop,value){
        console.log('更改了set',prop,value)
        const result = Reflect.set(target,prop,value)
        return result
    },
    // 删除某个属性
    deleteProperty(target,prop){
        console.log('删除了数据',target,prop)
        const result = Reflect.deleteProperty(target,prop)
        return result
    }
}

// 定义 shallowReactive 函数， 传入一个目标参数
function shallowReactive(target){
    //判断当前 target目标对象是不是Object类型(对象/数组)
    if(target && typeof target  === 'object'){
        return new Proxy(target,reactiveHandle)
    }
        return target 
}

function reactive(target){
    if(target && typeof target  === 'object'){

        if(Array.isArray(target)){
            target.forEach(item,index=>{
                target[index] = reactive(item)
            })
        }else{
            Object.keys(target).forEach(key=>{
                target[key] = reactive(target[key])
            })
        }


        return new Proxy(target,reactiveHandle)
    }
        return target 
}

console.log('=====================')

shallowReadonly 只读的

let readonlyHandler ={
    get(target,prop){
        if(prop === '_is_readonly') return true
        const result = Reflect.get(target,prop)
        console.log('读取了get数据',prop,result)
        return result
    },
    set(target,prop,value){
        console.warn('不能修改数据啊，你个老灯')
        return true
    },
    deleteProperty(target,prop){
        console.error('不能删除，你个老B灯')
        return true
    }
}
//shallowReadonly 和 readonly
// shallowReadonly
function shallowReadonly(target){
    if(target&& typeof target === 'object'){
        return new Proxy(target,readonlyHandler)
    }

    return target
}

readonly 只读的

function readonly(target){
    if(target && typeof target === 'object'){
        if(Array.isArray(target)){
            target.forEach(item,index=>{
                target[index] = readonly(item)
            })
        }else{
            Object.keys(target).forEach(key=>{
                target[key] = readonly(target[key])
            })
        }
        return new Proxy(target,readonlyHandler)
    }
    return target
}

console.log('==============')

shallowRef 和 ref

shallowRef

function shallowRef(target){
    return {
        _value : target,
        get value(){
            console.log('get到了数据')
            return this._value
        },
        set value(val){
            console.log('set修改了数据',val)
            this._value = val
        }
    }
}

ref

function ref(target){
    target = reactive(target)
    return {
        _is_ref:true,
        _value : target,
        get value(){
            console.log('get到了数据')
            return this._value
        },
        set value(val){
            console.log('set修改了数据',val)
            this._value = val
        }
    }
}

console.log('===============')

isRef和 isReadonly和 isProxy和 isReactive

function isRef(obj){
    return obj && obj._is_ref
}
function isReactive(obj){
    return obj && obj._is_reactive
}

function isReadonly(obj){
    return obj && obj._is_readonly
}

function isProxy(obj){
    return isReactive(obj) || isReadonly(obj)
}