Vue数据代理

1.Object.definePropetry

Object.definePropetry（object:Object，attribute:string，options:Options）
通过Object.definePropetry默认是不参与到遍历中的，也就是不可枚举的，并且不可改修，不可删除，但是可以通过配置
项进行对应属性的配置就可以做到以上三点

重点说下options配置项
1.enumerable:true       /*表示该属性可以被枚举*/
2.writable:true         /*表示该属性可以被修改*/
3.configurable:true     /*表示该属性可以被删除*/

第二种用法就是
options可以写成get(){ }, set(value:any){ }的函数形式,也是实现Vue双向绑定的原理

数据代理

概念：一个对象的属性或者方法与另一个对象产生关联

let obj = { x : 100 }
let obj2 = { y : 200 }

interface IObj {
    x?:number
    y:number
}

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

Vue数据代理

1.Vue中的数据代理: 通过vm对象来代理data对象中属性的操作（读/写)

2.Vue中数据代理的好处: 更加方便的操作data中的数据

3.基本原理: 通过object.defineProperty()把data对象中所有属性添加到vm上为每一个添加到vm上的属性,都指定一个getter/ setter。 在getter/setter内部去操作（读/写)data中对应的属性。

const vm = new Vue({
    el:'#root',
    data:{
        return {
            name:'zhangsan',
            age:18
        }
    }
})

实质做了什么？
1.把data整个对象赋值到vm._data上
2.现在还没有做数据代理，所以vm实例上没有name,age的属性
3.开始进行数据代理，把vm._data的值通过  Object.keys() + 遍历 + Object.definePropetry 代理到vm实例中