MVVM
全称Model-View-ViewModel
是基于MVC
和MVP
体系结构模式的改进,MVVM
就是MVC
模式中的View
的状态和行为抽象化,将视图UI
和业务逻辑分开,更清楚地将用户界面UI
的开发与应用程序中业务逻辑和行为的开发区分开来,MVP
模式模式不属于一般定义的23
种设计模式的范畴,而通常将其看作广义上的架构型设计模式。
MVVM
模式简化了界面与业务的依赖,有助于将图形用户界面的开发与业务逻辑或数据模型的开发分离开来。在MVVM
中的ViewModel
作为绑定器将视图层UI
与数据层Model
链接起来,在Model
更新时,ViewModel
通过绑定器将数据更新到View
,在View
触发指令时,会通过ViewModel
传递消息到Model
,ViewModel
像是一个黑盒,在开发过程中只需要关注于呈现UI
的视图层以及抽象模型的数据层Model
,而不需要过多关注ViewModel
是如何传递的数据以及消息。MVVM
模式与MVP
模式行为基本一致,主要区别是其通常采用双向绑定data-binding
,即将View
和Model
的同步逻辑自动化了,以前Presenter
负责的View
和Model
同步不再手动地进行操作,而是交给框架所提供的数据绑定功能进行负责,只需要告诉它View
显示的数据对应的是Model
哪一部分即可。
Model
称为数据层,其作为数据中心仅关注数据本身,不关注任何行为。View
是用户在屏幕上看到的结构、布局和外观,即视图UI
。Model
进行更新的时候,ViewModel
会通过数据绑定更新到View
。ViewModel
是暴露公共属性和命令的视图的抽象。ViewModel
中的绑定器在视图和数据绑定器之间进行通信。Model
更新时,ViewModel
通过绑定器将数据更新到View
,在View
触发指令时,会通过ViewModel
传递消息到Model
。View
可以独立于Model
变化和修改,一个ViewModel
可以绑定到不同的View
上,当View
变化的时候Model
可以不变,当Model
变化的时候View
也可以不变。ViewModel
里面,让很多View
重用这段视图逻辑。Model
,设计人员可以专注于页面设计。ViewModel
来进行。Bug
较难被调试,当界面异常,可能是View
的代码有问题,也可能是Model
的代码有问题,数据绑定使得一个位置的Bug
可能被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。下面是参照Vue
实现的简单的数据绑定实例,当然对于Vue
来说,文档中也提到了Vue
没有完全遵循MVVM
模型,但是Vue
的设计也受到了其启发,https://cn.vuejs.org/v2/guide/instance.html
,关于为什么尤大说Vue
没有完全遵循MVVM
,可以参考这个https://www.zhihu.com/question/327050991
。