MVC和MVVM区别和VUE关系

MVC(Model-View-Controller)和 MVVM(Model-View-ViewModel)是两种常见的前端架构模式,它们的主要区别在于处理业务逻辑和数据操作的方式。

MVC中,View(视图)可以直接访问Model(模型),而Controller(控制器)主要负责收集数据,并将数据从Model传递给View来完成交互。在MVC中,Controller承担了大量的责任,随着项目复杂度的增加,Controller中的代码可能会变得过于庞大和复杂,不利于维护。

相比之下,MVVM在处理业务逻辑和数据操作上更加灵活。ViewModel是一个同步Model和View的对象,Model和View之间没有直接的联系,而是通过ViewModel来实现交互。在MVVM架构下,Model和View的同步是通过双向绑定实现的,这意味着View的数据会同步到Model上,Model的数据变化也会即时显示在View上。这种自动同步的特性使得MVVM能够解决MVC中的大量DOM操作导致页面渲染速度降低、加载速度过慢等问题。

总的来说,MVC和MVVM都是为了实现Web系统的职能分工,但MVVM通过将数据绑定工作放到一个JS里去实现,解决了MVC中Controller承担过多责任的问题,使代码更易于维护。此外,MVVM通过双向绑定实现了Model和View的自动同步,提高了页面渲染速度和用户体验。

MVVM 新增了 VM 类

ViewModel 层:做了两件事达到了数据的双向绑定⼀是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页⾯。实现的⽅式是:数据绑定。⼆是将【视图】转化成【模型】,即将所看到的页⾯转化成后端的数据。实现的⽅式是:DOM 事件监听。MVVM 与 MVC 最⼤的区别就是:它实现了 View 和 Model 的⾃动同步,也就是当 Model 的属性改变时,我们不⽤再⾃⼰⼿动操作 Dom 元素,来改变 View 的显⽰,⽽是改变属性后该属性对应 View 层显⽰会⾃动改变(对应Vue数据驱动的思想)

整体看来,MVVM ⽐ MVC 精简很多,不仅简化了业务与界⾯的依赖,还解决了数据频繁更新的问题,不⽤再⽤选择器操作 DOM 元素。因为在 MVVM 中,View 不知道 Model 的存在,Model 和 ViewModel 也观察不到 View,这种低耦合模式提⾼代码的可重⽤性

注意:Vue 并没有完全遵循 MVVM 的思想这⼀点官⽹⾃⼰也有说明

那么问题来了为什么官⽅要说 Vue 没有完全遵循 MVVM 思想呢?

严格的 MVVM 要求 View 不能和 Model 直接通信,⽽ Vue 提供了$refs 这个属性,让 Model 可以直接操作 View,违反了

这⼀规定,所以说 Vue 没有完全遵循 MVVM。

相关推荐
yuren_xia6 小时前
IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤
spring·mvc·intellij-idea
人生导师yxc7 小时前
Spring MVC
java·spring·mvc
电商api接口开发11 小时前
ASP.NET MVC 入门指南三
后端·asp.net·mvc
天哥-天行健16 小时前
Trae+DeepSeek学习Python开发MVC框架程序笔记(一):1个程序实现MVC
学习·mvc
电商api接口开发1 天前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
Bling_1 天前
请求参数、路径参数、查询参数、Spring MVC/FeignClient请求相关注解梳理
java·spring·spring cloud·mvc
南客先生2 天前
MySQL索引优化、SQL分析与运行原理 - Java架构师面试实战
mysql·mvc·锁机制·sql分析·事务隔离级别·索引优化
Niuguangshuo2 天前
Python设计模式:MVC模式
python·设计模式·mvc
电商api接口开发2 天前
ASP.NET MVC 入门指南
c#·asp.net·mvc
酷ku的森3 天前
Spring Web MVC入门
spring·mvc