vue2.0的object.defineproperty简单实现监听

function Observer(value){
    this.value = value;
    if(Array.isArray(value)){
        //数组的逻辑
        walk(value);
    }else if(typeof value == 'object'){
        //对象的逻辑
        walk(value)
    }else{
        console.log('这不是对象或数组')
    }
    function walk(obj){
        const keys = Object.keys(obj);
        for(let i = 0; i < keys.length; i++){
            defineReactive(obj,keys[i]);
        }
    }
}
// 让对象每一个属性都变成可观察
function defineReactive(obj,key,val){
    if(arguments.length==2){
        val = obj[key];
    }
    if(typeof val == 'object'){
        //递归，深度监听
        new Observer(val)
    }
    Object.defineProperty(obj,key,{
        enumerable:true,//设置属性是否可以枚举，即是否允许遍历
        configurable:true,//设置属性是否可以删除或编辑
        get:function(){//获取属性的值
            console.log(`${key}属性被读取`);
            return val;
        },
        set:function(newVal){//设置属性的值
            console.log(`${key}属性被修改${newVal}`);
            val = newVal;
        }
    })
}
var obj = new Observer({
    name:'小米'
});
console.log(obj.value.name)
obj.value.name = '华为'
//打印：
//name属性被读取
//小米
//name属性被修改华为