shallowReactive 是浅的响应式,无法对深层的对属性值进行修改

reactive和 ref 是深的响应式

// 实现reactiveHandler回调函数
let reactiveHandler = {
    // 读取某个属性
    get(target,prop){
        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,reactiveHandler)
    }
        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,reactiveHandler)
    }
        return target 
}

        const proxyUser1 = shallowReactive({
            name:'小白',
            cal:{
                color:'白色'
            }
        })
        //；拦截到了 读取数据
        proxyUser1.name = '小蓝'
        // 拦截到了 读写数据
        proxyUser1.name += '=='
        // 拦截到了读取数据，拦截不到写的数据
        proxyUser1.cal.color += '=='
        // 拦截到了删除数据
        delete proxyUser1.name

        const proxyUser2 = reactive({
            name:'小白',
            cal:{
                color:'白色'
            }
        })
        //；拦截到了 读取数据
        proxyUser2.name
        // 拦截到了 读写数据
        proxyUser2.name += '=='
        // 拦截到了读取、写数据，
        proxyUser2.cal.color += '=='
        // 拦截到了删除数据
        delete proxyUser2.name
        // 拦截了读取数据、删除数据
        
        delete proxyUser2.cal.name