MVC、MVP、MVVM 架构 笔记

个人笔记 by Ai, 如有错误 望指正谢谢


一、主流 Web MVC

流程 :用户操作 → Controller -请求读/改数据 → Model -执行请求并返回结果 → Controller -传递结果→ View -根据结果更新页面

这里的 View不依赖Model行为,但大概率依赖数据契约,简单说就是 Model 负责规定数据"有什么",View 则根据这些数据的格式来决定页面"怎么显示"。属于耦合度偏低的数据耦合。


二、经典 MVC

流程①:View -主动监听 →Model -数据变动后通知 →View-拉取变动后的数据更新页面

流程② :用户操作 → Controller -请求读/改数据 → Model -变更数据,通知观察者(这里指的View)

View持有Model引用,但只读不写,同上面本质上是一回事,数据耦合、轻耦合。


三、MVP

流程 :用户操作 → Presenter -读/改数据 → Model -返回结果 → Presenter -操控→ View

和上面的主流 Web MVC 非常相似,不同是View:

  • ViewModel 完全无耦合。
  • View更抽象 更通用化,它可能提供一系列元素或调用接口,供Presenter自由实现

**举例:**一个通用的账户登录页面,页面包含标题、背景图、账号密码输入框、登录按钮,以及错误弹窗。采用 MVP 架构时,View 只需定义好这些 UI 元素,可能再封装一个弹窗调用方法就完了。它就像一个纯静态界面,只负责展示视图本身,完全不理解按钮、输入框对应的业务逻辑,具体功能实现全部交由 Presenter 处理。

如果换成上面主流的 Web MVC,情况就大不一样了: View 清楚自己是登录界面。用户点击登录后,它会把账号和密码传给 Controller 做校验,拿到结果后自主判断对错,校验失败就弹出提示。同时它还会主动校验输入内容,一旦发现账号或密码为空,立刻弹窗提醒。还有页面标题显示的是什么,View 也会主动问问 Controller 。


四、MVVM

流程:

用户操作 View → ViewModel处理 → Model更新 → ViewModel更新 → View自动刷新

**数据驱动视图!自动同步!**View ← 双向绑定 → ViewModel

和 MVP 中的 View 一样,MVVM 的 View 也完全不关心业务逻辑。用户产生操作时,View 仅将事件传递给 ViewModel,由 ViewModel 全权处理业务逻辑与数据加工。二者最大的不同在于,MVVM 额外增加了数据绑定机制:View 在初始化阶段就会和专属的 ViewModel 完成绑定,此后只要 ViewModel 内部数据发生变化,View 便会自动同步展示最新内容。

相关推荐
qq_420362031 小时前
前端国际化方案
前端·javascript·vue.js·国际化·reactjs
向上的车轮1 小时前
React 19 快速入门:拥抱服务端组件与新特性的现代化开发
前端·javascript·react.js
野生技术架构师1 小时前
2026最新Java面试1200题全解析:从基础到架构,覆盖所有技术栈(含答案)
java·面试·架构
大尚来也1 小时前
主键、外键、索引,一篇讲透
java·数据库·oracle
Smile_2542204182 小时前
vue3 + ts reactive方式清空表单对象
开发语言·前端·javascript
多租户观察室2 小时前
信通院标准体系2.0深度解读:低代码管理平台进入“精品竞争”时代
前端·低代码·程序员
段ヤシ.2 小时前
回顾Java知识点,面试题汇总Day17(持续更新)
java·springboot·spring security·shiro·mybatis-plus·jdbctemplate·spring data jpa
云水一下2 小时前
CSS3从零基础到精通(四):终章大项目——纯CSS构建企业品牌展示网站
前端·css3
jjjava2.02 小时前
Java 多线程核心基础与线程安全
java·开发语言