1.数据代理

1.1数据代理通过一个对象代理对另一个对象中属性的操作(读写)**

   <script>
       
        let obj = {
            x: 100
        };
        let obj2 = {
            y: 200
        }
        Object.defineProperty(obj2, 'x', {
            //当有人访问obj2.x属性，调用get() getter函数，且返回obj.x的值
            get() {
                console.log('我跟随obj.x 的修改');
                return obj.x
            },
            //当有人修改obj2.x属性，调用set() setter函数，且返回value的值
            set(value) {
                console.log('我修改了obj2.x的值,并返回给obj.x');
                //obj.x = value;
            }
        })

1.2 Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
参数 Object.defineProperty(obj, prop, descriptor)
1.obj 要定义属性的对象
2.prop 要定义或修改的属性的名称
3.descriptor 要定义或修改的属性描述符(配置项)
返回值 传递给方法的对象

<script>
        let number = 18;
        let person = {
                name: '尚硅谷',
                sex: '男',
                //age: 18
            }
            //Object.defineProperty 向对象添加属性
            // object 属性名 {value}
        Object.defineProperty(person, 'age', {
                //value: 18,
                //enumerable: true, //控制属性是否可以被枚举（遍历），默认是false
                //writable: true, //控制属性是否可以被修改，默认是false
                //configurable: true, //控制属性是否可以被删除，默认是false

                //当有人访问person.age属性，调用get() getter函数，且返回age的值
                get: function() {
                    console.log('有人读取age属性了');
                    return number
                },

                //当有人修改person.age属性，调用set() setter函数，且返回value的值
                set(value) {
                    console.log('有人要修改age的值,且值是' + value);
                    number = value;

                }
            })
            /*    for (let k in person) {
                    console.log(person[k]);
                }*/
    </script>

1.3vue中的数据代理

Vue实例化的时候vm_data = option.data
数据代理时 name adderss 代理 vm_data
1.Vue中的数据代理：

    通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

    更加方便的操作data中的数据

3.基本原理：

    通过Object.defineProperty()把data对象中所有属性添加到vm上。

    为每一个添加到vm上的属性，都指定一个getter/setter。

vm_data=option.data

  <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '.root',
            data: {
                name: '尚硅谷',
                adderss: '北京科技园'
            },
        });
    </script>