对MVVM的理解

对MVVM的理解

MVVM分为Model、View、ViewModel三者。

• Model：模型层：数据和业务逻辑都在Model层中定义。负责处理业务逻辑以及和服务器端进行交互

• View：视图层：也就是用户界面，负责数据的展示。将数据模型转化为UI展示出来，可以简单的理解为HTML页面

• ViewModel：视图模型层：框架封装的核心，用来连接Model和View，是Model和View之间的通信桥梁。
  ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。

MVVM 的出现促进了前后端分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

它的主要职责就是：

• 数据变化后更新视图
• 视图变化后更新数据

---

Model和View并无直接关联，而是通过ViewModel这个桥梁来进行联系的，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。 因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

MVVM模式简化了界面与业务的一览，解决了数据频繁更新，MVVM在使用当中，利用双向绑定技术，使得Model变化时，ViewModel会自动更新，从而View也会自动变化

---

MVC

MVC是Model-View- Controller的简写。即模型-视图-控制器。

M和V指的意思和MVVM中的M和V意思一样。

C即Controller指的是页面业务逻辑，Controller是MVC中的数据和视图的协调者，也就是在Controller里面把Model的数据赋值给View来显示（或者是View接收用户输入的数据然后由Controller把这些数据传给Model来保存到本地或者上传到服务器）

使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。

MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。