SOURCE

//实现vue3响应式Proxy原理
//响应式函数
const reactive =(target={})=>{
    //先判断是否为一个对象
    if(target==null || typeof target !== "object"){
        return target
    }
    //proxy代理配置
    const proxyConfig = {
        get(targer,key,receiver){
            const result = Reflect.get(targer,key,receiver)
            console.log("get访问了",key)
            //***重点****递归实现深度监听
            return reactive(result)
        },
        set(targer,key,receiver){
            const result = Reflect.set(targer,key,receiver)
            console.log("set设置",key)
            //实现深度监听
            return result
        },
        deletePrototype(arger,key,receiver){
            const result = Reflect.deleteProperty(target,key,receiver)
            return result
        }
    }

    //配置观察者
    const obverse = new  Proxy(target,proxyConfig)

    return obverse
}

//测试数据
const data = {
    name:"blank",
    arr :[1,[1]]
}
const reactiveData = reactive(data)

reactiveData.age=16
reactiveData.arr[1].push(2)
setTimeout(()=>{
    reactiveData.age=18
},1000)

console.log(reactiveData)