【前端】学习前端框架Vue之MVVM

简介: MVVM是一种客户端开发框架。MVVM是指数据层(Model),视图层(View),视图数据模型(ViewModel)。所以,MVVM是 Model-View-ViewModel 的缩写,即 模型-视图-视图模型。

MVVM中的一些名词含义

1、View:可以理解为是UI,这里面有Activity、Fragment、Dialog、toast等等用户可视化的界面
2、ViewModel:这一层直译为视图数据模型,ViewModel主要功能是实现数据双向绑定:数据变化后更新视图,既:model有数据更新时UI组件会响应变化,视图变化后更新数据,界面上如果有input输入框,输入数据时,model中的数据也会更新。
3、UseCase:业务逻辑层,数据在这里做业务逻辑,单测也是针对这一层的代码写。
4、Repository:数据仓库,顾名思义,数据仓库是用来存数据的而不是生产数据,大家不要把它和DataSource层搞混淆了。在这一层缓存数据,这里的数据是通过网络或者数据库拿到的源数据转成DTO或者BO存在这里,上层用数据时如果不需要再次访问DataSource,那么就直接访问这里的数据。
5、DataSource:这一层就是拿到数据的地方,在这里从网络或者数据库拿到数据,就是原始数据。
6、VO:view object,这是一种数据类型,这种类型专门给View层使用,用来填充UI,不含任何行为。
7、BO:business object,这是一种数据类型,这种类型专门给UseCase使用,用来做业务逻辑。
8、DTO:data transform object,这是一种数据类型,这种类型用来承接源数据,是一种纯数据数据类型,不含任何行为。
image.png

MVVM的特点

在MVVM框架中事件由view层传递到DataSource层,数据由DataSource层传递到View层。
分层+数据隔离+事件和数据单向传导的特性,让MVVM具有以下特点:
1、代码的职责更加清晰,View层的代码只有View相关代码,UseCase层是存java逻辑代码
2、加入了DTO、BO、VO三种数据结构,隔离了数据也隔离了变化,这样可以很大程度上避免牵一发而动全身的情况。
3、事件和数据单向流转,排查问题变得简单高效了。
4、UseCase是纯java代码,可以写单测。
5、由于引入了MVVM,开发顺序从以前的View开始到现在从UseCase开始写代码,这样做的一个好处就是你可以先把业务逻辑定了,一定程度上避免了View的反复修改。
6、对UseCase使用依赖倒置原则进行开发,会发现代码扩展性更好了。

MVVM开发流程的规范:

1、需求讨论会阶段需要产出业务流程图。
2、用例拆分阶段需要产出用例图。
3、开发阶段需要写单测,单测覆盖率具体以当时实施标准为准。
4、开发完成后,需要将这些过程资产在confluence上归档。

目录
打赏
0
0
0
0
118
分享
相关文章
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
254 26
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
128 58
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
77 1
vue学习第一章
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
77 1
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
66 1
vue学习第四章
|
11月前
|
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
103 3

热门文章

最新文章