跳至主要內容

MVVM模式

微信公众号:储凡2023/11/29大约 9 分钟

MVVM模式

MVVM全称Model-View-ViewModel是基于MVCMVP体系结构模式的改进,MVVM就是MVC模式中的View 的状态和行为抽象化,将视图UI和业务逻辑分开,更清楚地将用户界面UI的开发与应用程序中业务逻辑和行为的开发区分开来,MVP 模式模式不属于一般定义的23种设计模式的范畴,而通常将其看作广义上的架构型设计模式。

基本介绍

MVVM模式简化了界面与业务的依赖,有助于将图形用户界面的开发与业务逻辑或数据模型的开发分离开来。在MVVM中的ViewModel 作为绑定器将视图层UI与数据层Model链接起来,在Model更新时,ViewModel通过绑定器将数据更新到View,在View 触发指令时,会通过ViewModel传递消息到ModelViewModel像是一个黑盒,在开发过程中只需要关注于呈现UI 的视图层以及抽象模型的数据层Model,而不需要过多关注ViewModel是如何传递的数据以及消息。MVVM模式与MVP 模式行为基本一致,主要区别是其通常采用双向绑定data-binding,即将ViewModel的同步逻辑自动化了,以前Presenter 负责的ViewModel同步不再手动地进行操作,而是交给框架所提供的数据绑定功能进行负责,只需要告诉它View 显示的数据对应的是Model哪一部分即可。

View <- ViewModel <-> Model

组成

Model

  • 以面向对象来对对事物进行抽象的结果,是代表真实状态内容的领域模型。
  • 也可以将Model称为数据层,其作为数据中心仅关注数据本身,不关注任何行为。

View

  • View是用户在屏幕上看到的结构、布局和外观,即视图UI
  • Model进行更新的时候,ViewModel会通过数据绑定更新到View

ViewModel

  • ViewModel是暴露公共属性和命令的视图的抽象。
  • ViewModel中的绑定器在视图和数据绑定器之间进行通信。
  • Model更新时,ViewModel通过绑定器将数据更新到View,在View触发指令时,会通过ViewModel传递消息到Model

优点

  • 低耦合: 视图View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model 可以不变,当Model变化的时候View也可以不变。
  • 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
  • 独立开发: 开发人员可以专注于业务逻辑和数据的开发Model,设计人员可以专注于页面设计。
  • 可测试: 界面素来是比较难于测试的,测试行为可以通过ViewModel来进行。

不足

  • 如果项目太大,数据绑定需要花费更多的内存。
  • 数据绑定使得Bug较难被调试,当界面异常,可能是View的代码有问题,也可能是Model 的代码有问题,数据绑定使得一个位置的Bug可能被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。

代码实现

更新日志

2024/7/28 18:06
查看所有更新日志
  • c0f2d-refactor: 升级vuepress相关版本,优化项目结构 (#137)
  • e6a79-feat: 大幅新增设计模式、Linux命令、ORM框架教程文档