手写 shallowReactive 和 reactive

shallowReactive

shallowReactive 算是 reactive 的初级版本，就是对对象最外层属性的监视，主要利用 Proxy 实现

function shallowReactive (target){
    if(target && typeof target==='object'){
        return new Proxy(target,handler)
    }else{
        return target
    }
}

看起来最主要的 handler 还没实现，也就是拦截器

const handler={
    get(target,prop){
        console.log('拦截了 get 操作',prop)
        return Reflect.get(target,prop)
    },
    set(target,prop,value){
        console.log('拦截了 get 操作',prop,val)
        return Reflect.set(target,prop,value)
    },
    deleteProperty(target,prop){
        console.log('拦截了 deleteProperty 操作',prop)
        return Reflect.deleteProperty(target,prop)
    }
}

设置了读写和删除的操作，再用 Reflect 将变更反映到真实数据

const data = shallowReactive({
    name: '小黑',
    car: {
        color: "red"
    }
})
data.name                // 拦截了 get 操作 name
data.name='小白'         // 拦截了 set 操作 name 小白
delete data.name        // 拦截了 deleteProperty 操作 name
console.log(data)       // { car: { color: 'red' } }

data.car.color='green'  // 拦截了 get 操作 car
delete data.car.color   // 拦截了 get 操作 car
console.log(data)       // { car: {} }

通过结果得知，shallowReactive 只响应最外层属性的拦截，对于 car 里面的更改，是模糊的

reactive

reactive 则是深度的数据劫持，需要我们对对象进行递归代理

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,handler)
    }else{
        return target
    }
}

这样我们会发现，对于嵌套对象的访问，也可以拦截