数据代理Object.defineProperty()

数据代理: 通过一个对象代理对另一个对象中属性的操作（读/写）

数据代理

Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, desc)

• obj 需要定义属性的当前对象
• prop 当前需要定义的属性名
• desc 属性描述符

属性描述符

数据描述符

• configurable:是否可以重新定义

• enumerable：是否可以枚举

• value：初始值

• writable：是否可以修改属性值

访问描述符

• get：是一个回调函数，根据其他相关的属性动态计算得到当前属性值
• set：也是一个回调函数，监视当前属性值的变化，更新其他相关的属性值

<script type="text/javascript" >
    let number = 18
    let person = {
        name:'张三',
        sex:'男',
    }

    Object.defineProperty(person,'age',{
        // value:18,
        // enumerable:true, //控制属性是否可以遍历，默认值是false
        // writable:true, //控制属性是否可以被修改，默认值是false
        // configurable:true //控制属性是否可以被删除，默认值是false

        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get(){
            console.log('有人读取age属性了')
            return number
        },

        //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(value){
            console.log('有人修改了age属性，且值是',value)
            number = value
        }

    })

			// console.log(Object.keys(person))

</script>

VUE中的数据代理

Vue中的数据代理：通过实例对象vm来代理data对象中属性的操作（读/写）

基本原理：

• 通过Object.defineProperty()把data对象中所有属性添加到vm上。
• 为每一个添加到vm上的属性，都指定一个getter/setter。
• 在getter/setter内部去操作（读/写）data中对应的属性。

//通过一个对象代理对另一个对象中属性的操作（读/写）-->
let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2,'x',{
    get(){
        return obj.x
    },
    set(value){
        obj.x = value
    }
})