MVC和MVVM的关系

最新推荐文章于 2025-09-20 00:45:00 发布
原创 最新推荐文章于 2025-09-20 00:45:00 发布 · 383 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#mvc #vue.js #mvvm

本文详细介绍了MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）两种设计模式。MVC模式中，Model负责数据操作，View显示页面，Controller处理业务逻辑。MVVM模式下，Model保存页面数据，View展示视图，而ViewModel作为协调者，实现了Model与View的双向绑定。这两种模式在Web开发中广泛应用，提供对HTML、CSS和JavaScript的控制。

MVC的全名是Model View Controller，是一种使用“模型-视图-控制器”设计创建Web应用程序的模式，同时提供了对HTML、CSS和JavaScript的完全控制。

            M为model层：model层职能单一，只负责操作数据库执行对应的Sql语句，进行数据的CRUD。

            V为view层：每当用户操作了页面，如果进行业务处理，都会通过网络请求，去访问后端的服务器。

           C为controller层：也就是业务逻辑处理层，封装了一些具体业务逻辑的处理代码，为了保证职能单一，只负责处理业务逻辑不负责处理数据。

  

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。主要把每个页面分为M，V，VM三部分其中M指的是后端传递的数据。V指的是所看到的页面。VM 是mvvm模式的核心，VM是M和V之间的调度者。

           M这里的M保存的是每个页面中单独的数据。

           V就是每个页面中的HTML结构。

           VM是一个调度者分割了M与V，每当V层想要获取保存后的数据都需要通过VM。

 

mvc.zip_mvc_mvvm
09-21
总的来说，MVC和MVVM模式为软件开发提供了有效的组织结构，有助于提高代码质量，降低维护成本。通过理解模型、视图和控制器之间的关系，以及如何通过C层封装来优化架构，开发者可以更高效地构建和维护复杂的Web应用...
mvc和mvvm的关系图解
04-02
mvc和mvvm的关系图解
深入理解 MVC 与 MVVM：架构模式对比及实践应用
最新发布
前端圈边缘选手，擅长把 UI 稿 “翻译” 成代码，也擅长在 console.log 里写 “求救信号”。日常状态：要么在调像素级对齐，要么在查 “为什么这个样式只在我电脑上生效”。博客不搞高深理论，只唠实在干货~
09-20 834
MVC与MVVM架构模式对比及适用场景分析 MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）是两种主流的软件架构模式。MVC强调分层解耦，通过Controller协调Model与View的交互，适用于传统后端开发；MVVM则通过ViewModel实现数据双向绑定，更适合现代前端框架（如Vue、React）。两者核心差异在于：MVC依赖Controller手动转发指令，可能导致代码臃肿；MVVM利用数据绑定自动同步视图与数据，简化开发流程但学习成本较高
MVC和MVVM的之间的关系
zlq_优快云的博客
03-25 801
下图呢是我在学习vue的时候进行的总结，该图对我们的开发模式进行了详细的介绍：
mvvm和mvc
田兴的博客
01-14 5212
mvvm 概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候...
MVC MVP MVVM 三者区别与联系
m0_61700036的博客
03-20 1138
1、MVC模式 MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。 MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器.
MVC和MVVM详解
热门推荐
DH's Den
04-22 2万+
请预留足够的时间，您将看到大量的文字描述。但是相信我，您绝对值得花时间在这些文字描述上面。我已经尽了我最大所能来阐述关于MVC和MVVM如此这般设计的原因以及我们应该如何思考一些相关的问题
MVC、MVP和MVVM的开发模式的讲解以及事例举例
u013712343的博客
07-26 1525
MVC、MVP和MVVM的开发模式的讲解以及事例举例
2021-08-05 MVVM 和 MVC 区别是什么？哪些场景适合？
weixin_57066052的博客
08-05 434
1、基本定义 1.1）MVVM 基本定义 MVVM 即 Model-View-ViewModel 的简写，即模型-视图-视图模型，模型（Model）指的是后端传递的数据，视图(View)指的是所看到的页面，视图模型(ViewModel)是 mvvm 模式的核 心，它是连接 view 和 model 的桥梁。它有两个方向： 1.1.1）一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的 页面，实现的方式是：数据绑定， 1.1....
MVC与MVVM的关系图解
li__shuai的博客
09-08 261
MVC、MVP、MVVM之间的关系
AlbenXie的博客
08-01 760
一、MVC 什么是MVC MVC是一种模式，它将应用分为3个部分：数据（模型）、表现层（视图）、用户交互层（控制器）一个事件的处理大概是这样 用户和应用产生交互控制器的事件处理器被触发控制器从模型中请求数据，并将其交给视图视图将数据呈现给用户 模型（数据保存） 模型用来存放用户的所有数据对象。比如有一个user模型，用来存放用户列表、他们的属性以及
MVC和MVVM
A66457的博客
10-16 845
MVC和MVVM的介绍
MVC、 MVP、 MVVM关联及区别
weixin_54018826的博客
02-19 331
它们之间是递进关系，不断优化的：MVC的Mｏｄｅｌ和Ｖｉｅｗ还有一定程度的耦合，而在MVP ｈ和MVVM中Mｏｄｅｌ和Ｖｉｅｗ彻底分离，Mｏｄｅｌ和Ｖｉｅｗ只向外暴露方法让Pｒｅｓｅｎｔｅｒ调用；MVC：将应用抽象为数据层（Mｏｄｅｌ），视图层（Ｖｉｅｗ），逻辑层（Ｃｏｎｔｒｏｌｌｅｒ），降低了项目的耦合。但MVC未限制数据流Mｏｄｅｌ和Ｖｉｅｗ间可以通信。MVP：限制了Mｏｄｅｌ和Ｖｉｅｗ的交互，两者交流需要通过Pｒｅｓｅｎｔｅｒ，这样将两者分离，提高了项目维护和模块复用性。
MVVM的关系图解
糖长老莫小贝的博客
11-20 1156
#MVVM拆分解释为： *Model：负责数据存储 *View：负责页面展示 *View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图处理 #MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单 #用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点，以及使用MVVM是如何来解决这个缺点...
浅谈 MVC 和 MVVM 模式的联系和区别
lalalala~
11-08 3378
MVC（Model - View - Controller） MVC 是开发客户端最经典的设计模式 用户操作 --> View（负责接收用户的输入操作）–> Controller（业务逻辑处理）–> Model（数据持久化）–> View（将结果反馈给 View） 在开发中，除了简单的 Model、View 以外的所有部分都被放在了 Controller 中。Contro...
MVC、MVVM的区别和联系
qq_37012533的博客
12-11 342
网上的资料很多，面试也经常问到，为了进一步加深理解，还是以博客的方式记录下来。 MVC MVC是Model-View-Controller的简写，M是后端传递的json数据，V是指用户看到的HTML页面，C即处理页面的js逻辑，MVC是单向通信，也就是View和Model必须通过Controller来承上启下。 流程图如下： ...
MVC与MVVM的区别和联系
weixin_43844696的博客
06-23 469
MVC MVC的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View，比如在controller中写document.getElementById("box").innerHTML = data[”title”]，只是还没有刻意建一个Model类出来而已。 M：Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。 V：View（视图）：是应用程序中处理数据显
mvc和mvvm区别
01-07
### MVC与MVVM架构模式的区别 #### 1. 定义与结构 MVC（Model-View-Controller）是一种用于实现用户界面的经典设计模式，主要应用于服务器端开发环境，如JavaWeb应用。此模式将应用程序分为三个核心组件：模型(Model)，视图(View)以及控制器(Controller)[^1]。 相比之下，MVVM（Model-ViewModel-View）更侧重于客户端框架的设计理念，特别是对于现代JavaScript库/框架而言，比如Vue.js。它同样由三部分组成——数据模型(Model), 视图(View) 和视图模型(ViewModel)，其中ViewModel充当着连接View和Model之间桥梁的角色[^2]。 #### 2. 数据流方向 在传统的MVC体系里，当用户操作触发事件时，请求会被发送给相应的controller处理；接着controller会更新model的数据状态并通知view重新渲染页面显示最新的信息。这种交互方式通常被称为双向绑定机制下的推式通信(Push-based Communication)[^1]。 而在MVVM模式下，则采用了更加简洁明了的方式来进行UI同步工作。通过引入响应式的属性观察者特性，任何发生在data对象上的变动都会自动反映到DOM节点上而无需显式调用render方法刷新整个界面上的内容呈现效果。这也就是常说的一次性声明周期内的单向数据流动(Single-direction Data Flow)。 #### 3. 控制逻辑位置 由于历史原因，在许多基于MVC构建的应用程序中，业务规则往往被放置到了Controllers内部去执行。然而随着时间的发展和技术的进步，人们逐渐意识到这样的做法容易造成职责不清的问题，并且不利于后期维护工作的开展。因此现在推荐的做法是尽可能把复杂的商业流程封装进Service Layer里面以便更好地遵循单一责任原则(SRP)[^3]。 相反地，在采用MVVM范型所搭建起来的项目当中，所有的控制指令都集中定义于对应的ViewModel类之中。这样一来不仅能够保持良好的分层关系，同时也方便开发者利用工具链提供的调试功能快速定位潜在错误所在的位置[^4]。 ```javascript // Vue.js中的简单MVVM实例 const app = new Vue({ el: '#app', data() { return { message: 'Hello, world!' } }, methods:{ updateMessage(newMsg){ this.message=newMsg; } } }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值