对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实现的是业务逻辑组件的重用,使开发更高效,结构更清晰,增加代码的复用性。