MVC模型与MVVM模型区别

MVC模型

Model（模型）

Model是应用程序中用于应用程序中处理数据保存的部分，通常模型对象负责在数据库中存取数据

数据不可能凭空生成的，要么是从服务器上面获取到的数据，要么是本地数据库中的数据，也有可能是用户在UI上填写的表单即将上传到服务器上面存放，所以需要有数据来源. 既然Model是数据管理者，则自然由它来负责获取数据

View（视图）

View 是应用程序中处理数据显示的部分，通常视图是依据模型数据创建的

Controller（控制器）

Controller 是应用程序中处理用户交互，业务逻辑的部分，通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据

MVC 允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对 View 的操作交给了Controller 处理，在 Controller 中响应 View 的事件调用 Model 的接口对数据进行操作，一旦Model 发生变化便通知View进行更新，导致所有通信都是单向的

各部分之间的通信方式如下:

1. View 传送指令到 Controller
2. Controller 完成业务逻辑后，要求 Model 改变状态
3. Model 将新的数据发送到 View，用户得到反馈 

MVC模式的业务逻辑主要集中在Controller，而前端的View其实已经具备了独立处理用户事件的能力，当每个事件都流经Controller时，这层会变得十分臃肿. 而且 MVC 中 View 和 Controller一般是一一对应的，捆绑起来表示一个组件，视图与控制器间的过于紧密的连接让 Controller 的复用性成了问题

---

MVVM模型

MVVM 是 Model-View-ViewModel 的简写. 它本质上就是 MVC 的改进版. MVVM 就是将其中的 View 的状态和行为抽象化，并通过 ViewModel 将 视图 UI 和业务逻辑分开，ViewModel 可以取出 Model 中的数据，同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑

Model(模型层)

也可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为.

View(视图层)

指的是所看到的页面，和 MVC 不同的是，MVVM 中的 View 通过使用模板语法来声明式的将数据渲染进 DOM ，当ViewModel 对 Model 进行更新时，ViewModel会通过数据绑定更新到 View

ViewModel(视图模型层)

MVVM模式的核心，它是连接 View 和 Model 的桥梁，它有两个方向：

1. 将 Model 转化成 View，即将后端传递的数据转化成所看到的页面，实现的方式是：数据绑定
2. 将 View 转化成 Model，即将所看到的页面转化成后端的数据，实现的方式是：DOM 事件监听

这两个方向都实现的，我们称之为数据的双向绑定

各部分之间的通信方式如下:

---

总结

在MVVM的模式下 视图View 和 模型Model 是不能直接通信的.

它们通过 ViewModel 来通信，ViewModel 通常要实现一个 observer观察者.

当数据发生变化，ViewModel 能够监听到数据的这种变化，然后通知到对应的视图做自动更新;

而当用户操作视图，ViewModel 也能监听到视图的变化，然后通知数据做改动.

这实际上就实现了数据的双向绑定，并且MVVM中的View 和 ViewModel可以互相通信.

整体来看，MVVM模式 比 MVC模式 精简了很多，不仅仅简化了业务与界面的依赖，还解决了数据频繁更新（以前用jQuery操作DOM很繁琐）的问题

而且在MVVM中，View 不知道 Model 的存在，Model 也察觉不到 View，这种低耦合模式可以使开发过程更加容易，提高应用的可重用性

---

MVC模型 与 MVVM模型 本质区别

如何把 Model 展现到 View 上，以及如何将数据从 View 写入 Model里

MVC模型认为界面上的每个变化都是一个事件，只需要针对每个事件写一堆代码，来把用户的输入转换成 Model 里的对象就行了，这堆代码可以叫 Controller

而MVVM模型认为给 View 里面的各种控件也定义一个对应的数据对象，这样，只要修改这个数据对象，View 里面显示的内容就自动跟着刷新，而在 View 里做了任何操作，这个数据对象也跟着自动更新. 所以 ViewModel 就是与界面（View）对应的Model，因为数据库结构往往是不能直接跟界面控件一一对应上的，所以需要再定义一个数据对象专门对应 View 上的控件. 而 ViewModel的职责就是把 Model对象 封装成可以显示和接受输入的界面数据对象

ViewModel 就是 View 与 Model 的连接器，View 与 Model 通过 ViewModel 实现双向绑定