手写Vue3.0 数据劫持 响应式数据（深浅）

 手写实现shallowReactive与reactive

// 定义一个处理对象
const reactiveHnadler = {
    //获取
    get(target,prop,receiver){
        const result = Reflect.get(target,prop,receiver)
        return result
    },
    set(target,prop,value){
        const result  = Reflect.set(target,prop,value)
        return result
    },
    deleteProperty(target,prop){
        const result = Reflect.deleteProperty(target,prop)
        return result
    }
}

// 数据浅劫持
function shallowReactive(target){
    //判断当前参数对象是不是object类型
    if(target && typeof target === 'object'){
        return new Proxy(target,reactiveHandler)
    }
    return target
}

//深度响应式数据劫持
function reactive(target){
     //判断当前参数对象是不是object类型,对数组或对象 进行递归处理
     if(target && typeof target === 'object'){
        if(Array.idArray(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)
    
}

以上就是手写实现 shallowReactive和 reactive