Object.defineProperty 拦截器使用以及实现vue数据拦截

// Object.defineProperty  es5  vue

// 通过Object.defineProperty定义属性 可以增加拦截器

let obj = {}
let other = '';

Object.defineProperty(obj,'name',{
    enumerable:true,//设置是否可枚举
    configurable:true,//能不能删除这个属性
    get(){//读取方法
        console.log('--------');
        return other;
    },
    set(val){//设置方法
        other = val
    }


// })
obj.name=789
console.log(obj.name);



let obj = {
    other:'123',
    get name(){
        return this.other;
    },
    set name(val){
        this.other = val
    }
}
obj.name = '456'
console.log(obj.name);
// 对象的 setter和getter

// vue的数据劫持 (把所有属性都给成 get 和set方法)
function update(){
    console.log('更新视图');
}
let data = {
    name:'hj',
    age:90,
    adress:{
        location:'昌平'
    }
}
function observer(obj){
   
    if(typeof obj !=='object') return obj;
    for (let key in obj) {
        deineReactive(obj,key,obj[key])
    }
}
function deineReactive(obj,key,value){
    observer(value)
    Object.defineProperty(obj,key,{
        get(){
            return value
        },
        set(val){
            if(val!==value){
                observer(val)
                update()
                value = val
            }
           
        }
    })
}
observer(data);
data.age = 82;
data.adress = [1,2,3];

let methods = ['push','slice','pop','sort','reverse','unshift'];
methods.forEach(method=>{
    let oldMethod = Array.prototype[method];
    Array.prototype[method] = function(){
        update()
        oldMethod.call(this,...arguments)
    }
})
data.adress.push(4)