MV*模式（MVC/MVP/MVVM）

MVC模式

全称

Model View Controller
Model  数据模型层
View 视图层
Controller 业务逻辑层

运行原理

用户对View（视图层）进行操作，View（视图层）会收到这个操作，然后把处理的权力交给Controller（业务逻辑层），Controller（业务逻辑层）会对来自View（视图层）数据进行预处理、然后决定调用Model（数据模型层）的接口，然后由Model（数据模型层）执行相关的业务逻辑； 当Model（数据模型层）改变之后， View（视图层）通过观察者模式收到Model（数据模型层）改变的消息以后，然后重新更新界面。

注意

model发生变化，view通过观察者模式监控model改变，从而渲染最新视图。这就导致View强依赖特定的 Model层

MVP模式

全称

Model  View  Presenter
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。 

运行原理

用户对View的操作都会从View交移给Presenter。 Presenter会执行相应的程序逻辑，并且对Model进行对应的操作；当Model执行完业务逻辑以后，也是通过观察者模式把自己改变的消息传递出去，传给Presenter。Presenter获取到Model改变的消息以后，通过View提供的接口更新界面。

注意

1.各部分之间的通信，都是双向的；
2.View与Model不发生联系，都是通过Presenter进行传递；
3.View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性。而 Presenter非常厚，所有逻辑都部署在那里；
4.Model->View的手动同步逻辑麻烦，维护困难

MVVM模式

全称

Model View  ViewModel

运行原理

在ViewModel当中会有一个 Binder。在View的模版语法中，声明式渲染View上的显示的内容是和Model的哪一块数据进行绑定即可。 当ViewModel对Model进行更新的时候，Binder会把数据更新到View上去；当用户对View进行操作（例如表单输入），Binder也会自动的把数据更新到Model上去。称为：双向数据绑定。

注意

1.Model与View层没有任何的联系，都是靠viewModel将两者进行了关联，当model层数据改变了，viewModel就知道数据改变了，更新view层
2.vue中model层数据改变了，view会自动更新最新的数据视图
答：vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。然后当setter方法触发完成的时候，内部会进一步触发watcher,从而数据改变了，视图则更新操作完毕。