MVVM 架构篇

简介: MVVM 架构篇

定义

  • M: Model(服务器上的业务逻辑操作)
  • VView(页面)
  • VM: ViewModel(Model与View之间核心枢纽,比如Vue.js

微信截图_20221207191945.png


ModelViewModel 之间,通过 http 协议( axios 库等)和 websocket 协议( socket.io 库等)相互通信,二者形成双向关系。


ViewViewModel 之间,通过发布订阅,时间驱动,观察者等技术来实现:ViewModel中的数据改变,可以同时改变View上的显示内容View上的内容改变(比如输入框中的内容),也可以同时改变ViewModel中对应的数据功能,二者由此形成双向关系。


双向绑定

正向: 数据驱动页面

反向: 页面更新数据

微信截图_20221207191955.png


具体实现可参考笔记:vue2.x 双向绑定


双向绑定架构图

微信截图_20221207192005.png


  • observer(监听者):监听data的变化,一旦监听到变化,就通知dep(观察者列表)
  • dep(观察者列表):一旦收到来自observer的通知,就会回调所有的观察者(watcher),做相应的更新处理。
  • watcher(观察者):观察者这里存放的就是相应的更新处理,会更新view的显示内容。另外,观察者可以通过订阅的方式,加入到dep(观察者列表中)
目录
相关文章
|
10天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
12天前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
在 Android 开发中,选择合适的架构模式对于构建中大型项目至关重要。常见的架构模式有 MVVM、MVP、MVI、Clean Architecture 和 Flux/Redux。每种模式都有其优缺点和适用场景,例如 MVVM 适用于复杂 UI 状态和频繁更新,而 Clean Architecture 适合大型项目和多平台开发。选择合适的架构应考虑项目需求、团队熟悉度和可维护性。
40 6
|
17天前
|
存储 Dart 前端开发
flutter鸿蒙版本mvvm架构思想原理
在Flutter中实现MVVM架构,旨在将UI与业务逻辑分离,提升代码可维护性和可读性。本文介绍了MVVM的整体架构,包括Model、View和ViewModel的职责,以及各文件的详细实现。通过`main.dart`、`CounterViewModel.dart`、`MyHomePage.dart`和`Model.dart`的具体代码,展示了如何使用Provider进行状态管理,实现数据绑定和响应式设计。MVVM架构的分离关注点、数据绑定和可维护性特点,使得开发更加高效和整洁。
146 3
|
23天前
|
存储 前端开发 测试技术
Android kotlin MVVM 架构简单示例入门
Android kotlin MVVM 架构简单示例入门
27 1
|
23天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
24 1
|
1月前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
本系列学习教程笔记详细讲解了Kotlin语法,适合需要深入了解Kotlin的开发者。对于希望快速学习Kotlin语法的读者,建议参考“简洁”系列教程。本文重点介绍了Kotlin实现MVVM架构的设计思路和代码实现,包括Model、ViewModel和View层的具体实现,以及如何通过LiveData和viewModelScope有效管理数据和内存,避免内存泄漏。此外,还讨论了MVVM架构的常见缺点及应对策略,帮助开发者在实际项目中更好地应用这一设计模式。
33 1
|
13天前
|
前端开发 Java 测试技术
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
22 0
|
1月前
|
存储 前端开发 Java
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
|
1月前
|
设计模式 前端开发 JavaScript
深入探索研究MVVM架构设计
【10月更文挑战第7天】
21 0
|
1月前
|
存储 前端开发 Java
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
51 0