Vue基础(3)_数据代理

回顾js事件

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

语法：
Object.defineProperty(给哪个对象添加属性,‘添加的属性名’,{配置项})
可选属性值：
enumerable：true   控制属性是否可以枚举，默认值是false。
writable：true         控制属性是否可以被修改，默认值是false。
configurable：true  控制属性是否可以被删除，默认值是false。

Object.keys()方法
传入对象最为参数，返回传入对象的属性名。

简单的数据代理示例：

    <script>
        let obj = {x:100};
        let obj2 = {y:200};
        Object.defineProperty(obj2, 'x', {
            get(){
                console.log("获取该数值");
                return obj.x;
            },
            set(value){
                console.log("修改该数值");
                obj.x = value;
            }
        })
    </script>

数据代理

定义：通过一个对象代理对另一个对象中属性的操作。

Vue中的数据代理：通过vm对象来代理data对象中属性的操作(读/写)。
Vue中数据代理的好处：更加方便的操作data中的数据。(没有数据代理：_data.name，_data.address。有了数据代理：name，address)

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

数据代理图示：