MVC与MVVM的区别

已于 2024-07-30 23:27:04 修改
阅读量838 收藏 24
点赞数 27
分类专栏： Vue.js 前端面试题 文章标签： mvc 前端 javascript
于 2024-07-11 00:04:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40588441/article/details/140337378
版权

MVC与MVVM的区别

MVC

对于前端而言，数据变化无法同步到视图中。需要将逻辑聚拢在controller层

  • 传统的 MVC 指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理,控制器会获取数 据。将结果返回给前端,页面重新渲染

  • 经典MVC模式：Backbone + underscore + jquery

含义

  • M：model，模型层。代表数据库中的数据源，负责数据的处理和获取的数据接口层。

  • V：view，视图层。代表能看到的客户端页面，比如由html元素组成的网页界面，或者软件的客户端界面。，是根据模型数据创建的。

  • C：controller，控制层。代表业务逻辑，是模型层和视图层之间的桥梁，建立两者之间的关系。控制层本身是不会处理数据以及输出数据，他只是用来接受请求并决定用那个模型去处理请求，然后再确定用哪个视图来显示返回的数据。

image-20240710234438921

  • 假设用户进行一个input事件，这个事件就会在controller进行一个中转，通过controller去model里面获取数据，之后会返回给controller，controller接收到数据之后会返回给view，最后展示在页面上。所以说，controller相当于一个中转站。

优点

  • 耦合性低：视图层和业务层分离，这样允许更改视图层代码而不用重新编译模型和控制器代码，改变其中一个不会影响到其他两个，所以这种设计思想有良好的松耦合的构件
  • 重用性高：MVC模式允许各种不同样式的视图来访问同一个服务的代码，因为多个视图能共享要给模型数据。
  • 部署快：使用MVC模式开发时间相当大的缩减，它使程序员集中精力在业务逻辑上，视图与业务逻辑分开。
  • 生命周期成本低：MVC使开发和维护用户接口的技术含量降低。
  • 可维护性高：分离视图层和业务层逻辑也是WEB应用更易于维护和修改。
  • 有利于软件工程化管理：由于不同的层各司其职，每一层不同的应用具有某些特性，有利于通过工程化、工程化管理程序代码，可以使用控制器来连接不同的模型和视图去完成客户的需求.控制器可以根据用户需求选择模型进行处理，然后选择视图处理结果显示给用户
  • 功能模块分离：能将应用程序的各个功能模块分离开来，提高代码的可维护性和可扩展性

缺点

  • 不适合小型，中等规模的应用程序。
  • 视图与控制器间的过于紧密的连接并且降低了视图对模型数据的访问。

MVVM

  • 传统的前端会将数据手动渲染到页面上, MVVM 模式不需要用户收到操作 dom 元素,将数据绑 定到viewModel 层上，会自动将数据渲染到页面中，视图变化会通知 viewModel层 更新数据。 ViewModel 就是我们 MVVM 模式中的桥梁
  • 严格的MVVM模式中,View层不能直接和Model层通信,只能通过ViewModel来进行通信。
  • 映射关系的简化 （隐藏controller）

含义

  • M：model，模型层。代表渲染页面所依赖的数据源，是通过Ajax从服务端获取回来的数据，这些数据是用来将来渲染到页面上的。

  • V：view，视图层。负责将数据模型转化为UI展示出来呈现给用户，可以简单的理解为HTML结构。

  • VM：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁。是vue的实例，是MVVM的核心。它的作用是当监听到DOM变化时，会自动的更新数据源里面所依赖的数据。而当修改了model数据源里面的数据时，VM又会自动的重新渲染页面。

  • MVVM实现了数据驱动视图和数据的双向绑定。

img

  • Model ---- View ---- VM(ViewModel)

    img

优点

  • 低耦合：视图View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

  • 可重用性：可以把一些视图逻辑放在ViewModel里面，让很多view重用这段视图逻辑。

  • 独立开发：开发人员可以专注业务逻辑和数据的开发，设计人员可以专注页面设计。

  • 可测试：界面向来比较难预测时，测试可针对ViewModel来写。

  • 数据驱动

    img

  • VM提供数据的双向绑定

    img

Vue涉及思想

  • Vue并没有完全遵循MVVM模型（Vue只是其中的响应式原理遵循的是MVVM）
    • Vue可以不直接通过viewModel来操作视图，可以手动把数据挂载到视图上（例如：ref）

img

React涉及思想

  • React 只是做V层，视图层

区别

  • 都是一种设计思想
  • MVC后端用的多，而MVVM是前端设计思想
  • 在MVC里，view是可以直接访问Model的，所以View里会包含Model信息以及一些业务逻辑
    • MVC模型关注的是Model的不变，所以在MVC模型里，Model不依赖于View，但是View依赖于Model
    • MVC是单向通信，数据模型必须通过Controller层进行承上启下。
  • MVVM是将View和Model实现自动同步，当Model属性改变时，不用再自己手动操作Dom元素，提高页面渲染性能
    • 在概念上真正将页面与数据逻辑分离的模式
    • 将数据绑定工作放到一个JS里去实现，而这个js文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上
    • 双向绑定，方便去同时维护页面上都依赖于某个字段的N个区域，而不用手动更新它们

MVVM并不是用ViewModel完全取代了controller，mvvm只能算是mvc的升级版，viewModel存在目的在于抽离controller中展示的业务逻辑，而不是替代controller，其他视图操作业务等还是应该放在controller中实现

若梦plus
关注
专栏目录
vue之MVC与MVVM区别
我心坚持
01-18 551
MVC： M-model-模型：数据处理（数据库、接口） V-view-视图：用户界面、页面（HTML编写的） C-control-控制器：编写js业务逻辑 例如：从页面view层触发一个按钮获取数据，就会向C控制器层请求自己需要的数据，而C控制器就会向M模型层请求 数据，M模型层就会把数据传给C，C再传给V视图层。 MVVM： M-model-模型：后端数据处理（数据库、接口） V-view-视图：用户界面、页面（HTML编写的） VM-viewModel-视图模型层:链接view和model的桥梁，v
mvc和mvvm的区别
Astrid_Doraemon的博客
03-26 2018
1.mvc和mvvm的区别 1.1认识mvc的含义 MVC全名是Model View Controller，其中Model(模型层)，View(视图层)，Controlle(控制层)。 MVC框架模式图 1.2mvc模式 Model(模型) ：处理应用程序核心比如 数据库。 View(视图)：显示效果即html页面 Controller(控制)：处理业务相关的逻辑 优点 耦合性低 视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，同样，一个应用的...
MVC和MVVM的区别
qq_48806446的博客
09-27 1473
MVVM和MVC的区别、java、
MVC与MVVM区别
Dream_Lee的博客
03-19 311
1.MVVM Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数...
MVC和MVVM区别
热门推荐
qq_40007317的博客
06-09 1万+
1、MVC MVC是一种设计模式： M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据； V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的； C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。 2、MVVM vue框
MVC和MVVM有什么区别
weixin_70443954的博客
11-28 5279
Vue、MVC、MVVM、双向数据绑定、数据驱动视图
mvc与mvvm的区别
weixin_45130434的博客
11-15 319
MVC 模型－视图－控制器（Model-View-Controller） MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。 MVVM （Model-View-ViewModel） 如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变...
MVC与MVVM的区别与联系？各自的优缺点？MVP模式
good7ob的博客
12-07 1089
MVC是一种经典的架构模式，它将应用程序分为三个主要组件：模型（Model）、视图（View）和控制器（Controller）。每个组件有不同的责任。模型（Model）：负责管理应用程序的数据和业务逻辑。它通常不直接与用户界面交互，而是提供数据供视图和控制器使用。视图（View）：负责呈现数据给用户，并将用户的输入反馈给控制器。视图通常是 passives（被动的），它们不处理业务逻辑。控制器（Controller）：充当模型和视图之间的中介，处理用户输入并更新模型和视图。
MVC和MVVM
githubcurry
03-23 5603
区别：MVC表示“模型-视图-控制器”，MVVM表示“模型-视图-视图模型”；MVVM是由MVC衍生出来的。MVC中，View会直接从Model中读取数据；MVVM各部分的通信是双向的，而MVC各部分通信是单向的；MVVM是真正将页面与数据逻辑分离放到js里去实现，而MVC里面未分离。 MVC和MVVM是两种流行的设计模式。其中，MVC表示模型-视图-控制器，MVVM表示模型-视图-视图模型； MVVM是由MVC衍生出。这些设计模式大体上都有助于开发松散组合、易于测试和维护的应用程序。 MVC（Mode.
MVC与MVVM
老电影故事的博客
10-29 194
一、概述 在 iOS 开发中，MVC（Model View Controller）是构建iOS App的标准模式，是苹果推荐的一个用来组织代码的权威范式。Apple甚至是这么说的。在MVC下，所有的对象被归类为一个Model，一个View，和一个Controller。Model持有数据，View显示与用户交互的界面，而ViewController调解Model和View之间的交互。 但使用MVC不可避免的会遇到几个问题： 1.厚重的ViewController 2.遗失的网络逻辑（无立足之地） 3.较差的可
【设计模式】MVC与MVVM详尽解读与实战指南
Allen-
04-21 1200
前端开发世界中，架构设计犹如高楼之基，决定着代码的组织层次、模块间交互方式以及项目长远的可维护性和扩展性。本文将全方位剖析两种主流前端架构模式——MVC（Model-View-Controller）与MVVM（Model-View-ViewModel），辅以实例助你透彻理解其核心理念与实战技法。
谈谈MVC和MVVM1
08-08
iOS 的 MVC 模式与传统的 MVC 模式略有不同， Controller 不仅仅负责处理业务逻辑，还负责管理视图层和事件的传递。 MVVM 模式 MVVM 模式是基于 MVC 模式的改进版本，由 Microsoft 于 2005 年提出。MVVM 模式的...
MVC 与 MVVM 的深入剖析：区别与示例代码的震撼呈现
06-19
**MVC与MVVM的区别** 1. **数据绑定**：MVC中，视图和模型的同步通常需要控制器来协调；而在MVVM中，视图和模型的同步是自动的，通过数据绑定实现。 2. **职责划分**：MVC的控制器承担了更多的职责，包括处理用户...
基于Java Web 的家乡特色菜推荐系统
最新发布
chusheng1840的博客
11-16 550
基于Java 的家乡特色菜推荐系统，基于 SpringBoot+Vue 开发的，功能完整，包括源码和部署教程。可用于毕业设计和课程设计本次设计任务是要设计一个家乡特色推荐系统，通过这个系统能够满足家乡特色文章的管理功能。系统的主要功能包括首页，个人中心，用户管理，文章分类管理，文章分享管理，系统管理等。管理员可以根据系统给定的账号进行登录，登录后可以进入家乡特色推荐系统，对所有模块进行管理。包括查看和修改自己的个人信息以及登录密码。
前端文件优化
weixin_62668406的博客
11-15 631
对于一张100*100像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字 节），所以该图⽚⼤⼩⼤概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项⽬中，⼀张图⽚可能并不需要使⽤那么多颜⾊去显示，我们可以通过减少每个 像素的调⾊板来相应缩⼩图⽚的⼤⼩。
【小白可懂】微信小程序---课表渲染
weixin_71942139的博客
11-16 250
微信小程序课表渲染思路实现
springboot整合websocket实现复制目录进度推送
前人栽树，后人乘凉。
11-14 388
/ 替换为你的WebSocket地址。启动Spring Boot应用程序，然后访问前端页面并触发文件复制操作。例如，通过浏览器访问。你应该能够在前端看到实时的复制进度。创建一个控制器来触发复制操作。
ArkUI---常用组件---切换按钮 (Toggle)
m0_73992525的博客
11-15 700
ArkUI中的常用组件Toggle的三种形态：Button、Checkbox、Switch
【Java Web】JSTL及其核心库介绍 JSTL函数
m0_66584716的博客
11-12 1211
JSTL（JavaServer Pages Standard Tag Library）是 Apache 提供的一个用于 Java Web 开发的标准标签库，它依赖于表达式语言（EL），旨在简化 JSP 的开发过程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值