MVVM架构模式

目录

一、MVVM简介

MVVM是Model-View-ViewModel的简写。即是模型-视图-视图模型。

MVVM架构模式是一种软件设计模式,它将应用程序分为三个部分:模型(Model)、视图(View)和视图模型(ViewModel)。该模式的目的是将用户界面(UI)逻辑与业务逻辑分离,以便开发人员可以更轻松地管理和修改应用程序。

在MVVM模式中,模型表示应用程序中的数据和业务逻辑,视图表示用户界面,视图模型则是连接模型和视图的桥梁。视图模型从模型获取数据并将其转换为视图可以理解的形式,然后将其传递给视图。视图模型还接收来自视图的用户输入,并将其传递给模型进行处理。视图模型可以实现命令、验证、异常处理等功能,以便在应用程序中实现更加完整和健壮的业务逻辑。

MVVM模式的优点包括:提高代码的可维护性、可测试性和可重用性;隔离复杂的UI逻辑;改善团队合作(开发人员可以专注于他们的领域)等。

二、MVVM结构

  • model模型

    • 指的是后端传过来的数据。
  • view视图

    • 指的是所有看到的页面,可以理解为将数据以某种方式呈现给用户。
  • ViewModel

    • 指的是视图模型,他是连接view和model的桥梁。

从上面的图片可以大致看到,有两个不同的方向。

  1. 模型->视图

    解析:将后端数据转换为前端的页面。实现的方式是数据绑定。

  2. 视图->模型

    解析:将前端页面转换为后端数据的实现方式:叫做Dom数据监听。

    存在两个方向都能实现的情况下,叫做数据的双向绑定。

三、MVC

MVVM是Model-View-ViewModel的简写。本质上就是MVC的改进版。
MVCModel View Controller的简写, 即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离,从而使同一个程序可以使用不同的表现形式。

  1. View 传送指令到 Controller
  2. Controller 完成业务逻辑后,要求 Model 改变状态
  3. Model 将新的数据发送到 View,用户得到反馈
    可以看到其所有的通信都是单向的。view和model是直接进行通信的。view和model之间随着业务量的不断庞大,会出现和蜘蛛网一样难以处理的关系,随着前端应用的复杂程度越来越复杂。所以必须要改进。
    原文链接

四、MVP

MVP是 Model View Presenter 的简写。它与MVC的不同是改变了通信方向

MVVM是MVC的改进版,立足于MVP并进一步的改进

  1. 各部分之间的通信,都是双向的。
  2. View 与 Model 不发生联系,都通过 Presenter 传递。
  3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

五、MVVM的优势与存在的问题

  • 优点
    • 低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
    • 可重用性。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
    • 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
    • 可测试。界面素来是比较难于测试的,测试可以针对ViewModel来写。
  • 缺点
    • 有人认为对于简单的UI,MVVM可能过于庞大。
    • 在View和ViewModel之间没有提供紧密的耦合
    • 当具有复杂的数据绑定时,调试过程将很复杂。
相关推荐
敲敲了个代码22 分钟前
多标签页强提醒不重复打扰:从“弹框轰炸”到“共享待处理队列”的实战
java·前端·javascript·面试·架构
Henry Zhu1231 小时前
Qt Model/View架构详解(四):高级特性
开发语言·qt·架构
Henry Zhu1233 小时前
Qt Model/View架构详解(五):综合实战项目
开发语言·qt·架构
马士兵教育3 小时前
AI大模型通用智能体项目从原理到落地:Agent Skills 的核心逻辑与中间件 + 动态工具实践方案+架构项目实战!
人工智能·中间件·架构
Blossom.1184 小时前
用纯 NLP 打造「零样本」时序预测模型:文本化序列 + LLM 的实战路线
人工智能·python·深度学习·机器学习·自然语言处理·架构·transformer
Aloudata5 小时前
破局 AI 幻觉:构建以 NoETL 语义编织为核心的 AI 就绪数据架构
人工智能·架构·数据分析·dataagent
GIOTTO情5 小时前
Infoseek 媒介投放系统技术架构解析:高可用与智能化落地实践
架构
信码由缰5 小时前
JExten:基于Java模块系统(JPMS)构建健壮的插件架构
java·开发语言·架构
上海控安6 小时前
蓝牙协议栈架构概述
网络安全·架构
Python_Study20256 小时前
工程材料企业如何通过智慧获客软件破解市场困局:方法论、架构与实践
大数据·网络·数据结构·人工智能·架构