Vue：数据代理

一、MVVM模型

在MVVM模型中：

• M：Model模型，指data中的数据
• V： View视图，指模板代码
• VM：ViewModel视图模型，指Vue实例

        MVVM采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

MVVM核心思想，是关注model的变化，让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。

二、Object.defineProprty

        VUE的底层使用了Object.defineProprty，Object.defineProperty()方法会直接在一个对象上定义一个新属性。

    <script>
        let number = 18;
        let person = {
            name:"wangy",
            sex:"男"
        }

        // 使用 Object.defineProperties()方法为对象添加一个新属性。
        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;
            }
        })
    </script>

三、数据代理

        数据代理是通过一个对象代理另外一个对象中属性的操作（读/写），如下所示：

    <script>
        let obj1={
            x:100
        }

        let obj2={
            y:200
        }

        Object.defineProperty(obj2,'x',{
            get(){
                return obj1.x;
            },
            set(value){
                obj1.x = value;
            }
        })
    </script>

        VUE中使用数据代理，通过vm对象来代理data对象中属性的操作（读/写），这样更加方便操作data中的数据。

VUE代理data对象属性的基本原理如下：

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

        如下图所示。在Vue中，其会将我们写的data传给其自身属性_data，然后将_data中的属性（也即我们写在data中的属性）通过Object.defineProprty添加到vm中，并通过get和set方法实现与data对象中相应属性的数据代理。