1、MWM模型

mvvm模型：就是把数据和dom通过一个中间对象进行连接。

• M:模型Model, data中的数据，把它当作一个单独的模块，不属于VM，因为VM对象里会将它复制一份在里面作为数据代理。

• V:视图View,模板代码

• VM:视图模型ViewModel, Vue实例

观察发现

• data中所有的属性，最后都出现在了vm身上
• vm身上所有的属性及Vue原型身上所有的属性，在Vue模板中都可以直接使用

    
    
    
    
    
    



    

        
学校名：{{name}}
        
学校地址：{{address}}
        
{{$options}}
    

    
    

数据交换：

或者这样

2、数据代理

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

        const obj1={x:100};

        const obj2={y:200};

        //让obj2成为obj1的数据代理(也就是让obj2能访问和操作obj1的属性)
        Object.defineProperty(obj2,"x",{
            get:function(){
                return obj1.x;
            },
            set:function(value){
                obj1.x=value;
            }            
        });

        //这样在读obj2的x属性就等于是在间接操作obj1的x属性。

在控制台输出obj2对象可以看到，当鼠标悬停在obj2的x属性上时,就会有一个getter标识，就代表这个x属性是会调用get函数来读取值。

obj2的x属性在逻辑上就如下图一下连接着obj1的x属性。

vue中的数据代理

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

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

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

Vue将data中的数据拷贝了一份到_data属性中，又将_data里面的属性提到Vue实例中（如name） ,通过defineProperty实现数据代理，这样通过geter/setter操作name,进而操作_data中的name。而_data又对data进行数据劫持，实现响应式。一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。也就是改变_data里的数据，模型data也会受影响，而data数据改变，就会影响到页面上的值，因为vue会监听data模块。

vue的实例vm身上的_data是实例化时代码里的data的关系：就是实例身上的_data是data的数据代理，改实例身上的_data实际上是间接改data的属性。data就是MVVM里的Model，它在逻辑上是不属于vue的实例vm的。而是单独存在的。实例vm身上根本不可能有data属性，在实例化vue的实例vm的时候传进去的配置对象里的data在逻辑上本身就是单独的一个模块。实例vm确实会拷贝一个data存在自己身上，只不过这个属性名叫_data。

实际上，vue的实例vm身上的_data通过vue底层实现了更改_data里的数据data里也会跟着改变，这就是上面说的它们存在着某种类似数据代理的关系。实际上，vue也为了方便我们开发，把_data里的属性给添加到了vm实例身上，这也是通过数据代理实现的，只是为了我们开发，比如：页面里可以用name直接访问到_data里的name，实际上也可以通过_data.name访问，但是这样比较麻烦，所以vue才做了_data的数据代理。

    
    
    
    
    
    



    

        
学校名称：{{name}}


        
地址：{{address}}