vue3手写shallowReactive和reactive

1、shallowReactive

const shallowReactiveHandler = {
    get(target,prop){
        console.log('拦截到了获取数据');
        return Reflect.get(target,prop);
    },
    set(target,prop,val){
        console.log('拦截到了更新数据或设置新属性');
        return Reflect.set(target,prop,val);
    },
    deleteProperty(target,prop){
        console.log('拦截到了删除数据');
        return Reflect.deleteProperty(target,prop);
    }
}
const shallowReactive = (target) => {
    if(target && typeof target === 'object'){
        return new Proxy(target,shallowReactiveHandler);
    }
    return target;
}
const result = shallowReactive({
    name:'Agwenbi',
    age:25
});
setTimeout(() => {
    result.age += 1;
    console.log(result);
}, 2000);

2、reactive

const reactive = (target) => {
    console.log(typeof target);
    if(target && typeof target === 'object'){
        if(Array.isArray(target)){
            target.forEach((item,index) => {
                target[index] = reactive(item);
            });
        }else{
            Object.keys(target).forEach(item => {
                target[item] = reactive(target[item]);
            });
        }
        return new Proxy(target,{
            get(target,prop){
                console.log('监听到了数据获取');
                return Reflect.get(target,prop);
            },
            set(target,prop,val){
                console.log('监听到了数据更新或者新属性添加');
                return Reflect.set(target,prop,val);
            },
            deleteProperty(target,prop){
                console.log('监听到了数据属性的删除');
                return Reflect.deleteProperty(target,prop);
            }
        });
    }
    return target;
}
const result = reactive({
    name:'Agwenbi',
    age:25,
    car:{
        name:'奔驰',
        color:'red'
    }
});
console.log(result.name);
result.age = 26;
console.log(result);
result.car.color = 'yellow';
console.log(result);