【前端】学习前端框架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上归档。

相关文章
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2天前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
13 4
|
6天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
14 1
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
25 3
|
8天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
8天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
13天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
7天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
11 0
|
8天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
2天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发