proxy 实现数据响应式

proxy实现数据的响应式变化的好处

可以支持数组，而且不用区分是对象还是数组

兼容性 vue3.0 会采用如果支持proxy 就用proxy 不支持就还是Object.defineProperty

//写个渲染 模拟视图更新
function render(){
    console.log('模拟视图更新')
}
//代理个对象
let obj = {
    name:'fxj',
    age:{age:30},
    arr:[2]
}

let handler = {

    get(target,key){
        //如果取的值是对象就在这个对象进行数据劫持
        if(typeof target[key] == 'object' && target[key] !== null){
            return new Proxy(target[key],handler)
        }
        return Reflect.get(target,key)
    },
    set(target,key,value){
        console.log('key',key)
        if(key == 'length') return true
        render()
        return Reflect.set(target,key,value)
    },
}

//创建一个代理来操作这个对象
let proxy = new Proxy(obj,handler);
//proxy.age.age=20
proxy.arr.push(3)