Object.defineProperty 数据劫持与 proxy 数据代理

Vue2数据响应核心是使用了Object.defineProperty方法（IE9+)在对象中定义属性或者修改属性，其中存取描述符很关键的就是get和set,提供给属性getter和setter方法

Object.defineProperty 数据劫持

let params = {
    _name:'zhangsan'
}

Object.defineProperty(params,'name',{
    get(){
        console.log(5456);
        return '用户名：'+this._name
    },
    set(val){
        this._name = val
    }
})

params.name = 'lisi'
document.write(params.name);// 用户名：lisi

let obj = {
    _name:'zhangsan',
    _age:30
}
Object.defineProperties(obj,{
    name:{
        // configurable是否可以被delete删除，默认为true
        configurable:false,
        // writable是否可以被修改，默认为true，不可以和set同时存在
        writable:false,
        // enumerable是否可以被for in 循环，默认为true
        enumerable:false
    },
    age:{
        // configurable:false,
        // writable:false,
        // enumerable:false
        get(){
            return 'age：'+this._age
        },
        set(val){
            this._age = val
        }
    }
})

proxy 数据代理

let p1 = {
    name:'zhangsan',
    age:18
}
let p2 = {
    get(obj,key){
        return obj[key]
    },
    set(obj,key,val){
        obj[key] = val
    }
}

let proxy1 = new Proxy(p1,p2);
console.log(proxy1.name);// zhangsan
proxy1.age = 20
console.log(proxy1.age);// 20