对MVVM模型的简单理解

一、MVVM模型解述

MVVM模型就是Model View ViewModel的缩写

M:Model(模型)：对应data中的数据

V:View(视图)：模板，可以简单理解为页面所呈现的东西

VM:ViewModel(视图模型)，Vue实例对象，通常使用vm代替Vue实例

二、代码理解

首先写一个简单代码，其中Model代表的就是data中的数据，下方呈现的页面代表View，vm就代表ViewModel,然后我们在控制台输出vm实例对象，发现vm身上带有data上的数据

三、原理

在MVVM模型架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，ViewModel就是连接View和Model的中介。

1. ViewModel能够观察到数据的变化，并对视图对应的内容进行更新。
2. ViewModel能够监听到视图的变化，并能够通知数据发生变化。

ViewModel能够观察到数据的变化：进行了数据代理

ViewModel对视图对应的内容进行更新：使用了数据双向绑定（使用各种语法，指令将数据呈现在页面上）

1.      通过定义一个实例对象生成vm实例对象，
2.      然后将data中的数据投放到vm上的_data上，
3.      这个时候vm身上并没有name,address,只有_data.name,_data.address，然后vm自己创建出来了一个name和一个address，
4.      然后将_data中的数据通过数据代理到name和address上，每当要读取/修改vm上的数据时，就会调用getter/setter方法，将_data中的数据给vm，进而可以获得最新的数据
5.      最后通过数据双向绑定将获得的数据对视图内容进行更新

数据代理实现底层逻辑

使用Object.definePropertyAPI实现：Object.defineProperty(对象,'属性',{get(){},set(){}})

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

数据代理好处

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

ViewModel能够监听到视图的变化，并能够通知数据发生变化：响应式（reactive)

响应式原理：

在改变数据的时候，视图会跟着更新（Vue给_data里所有的属性加上set,get这个过程就叫做响应式）。

1. 首先代码中写了一段数据，接着Vue使用数据代理将数据传给_data，但是在给_data数据之前，要进行对data的一点点加工(给每个数据都指定一个set,get方法)，然后再将值赋给_data
2. 当外界对_data中的数据进行更改时，就会调用_data中的set方法进行对模板页面数据的修改，起到响应式页面与数据的作用

四、总结

• data中所有的属性、computed的计算属性、methods中的方法等，最后都出现在了vue实例vm身上。

• vue实例vm身上所有的属性 及 Vue原型上所有属性，在Vue模板{{}}中都可以直接使用