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。

相关推荐
一只码代码的章鱼4 小时前
spring -MVC-02
java·spring·mvc
努力学习的明8 小时前
Spring MVC 中请求处理流程及核心组件解析
java·spring·mvc
努力学习的明1 天前
Spring MVC 对 JavaWeb 的优化:从核心组件到注解
java·spring·mvc·web
bing_1581 天前
Spring MVC 拦截器 (HandlerInterceptor) 是什么? 它与 Servlet Filter 有什么区别?
spring·servlet·mvc
xlsw_1 天前
mvc-service引入
mvc
bing_1582 天前
Spring MVC 根据请求头 (如 Accept) 怎么返回 JSON 或 XML 数据?
spring·json·mvc
bing_1582 天前
Spring MVC HttpMessageConverter 的作用是什么?
java·spring·mvc
神秘的t3 天前
Spring Web MVC————入门(2)
java·spring·mvc
冷心笑看丽美人3 天前
Spring MVC数据绑定和响应 你了解多少?
java·spring·mvc
纸包鱼最好吃3 天前
java基础-package关键字、MVC、import关键字
java·开发语言·mvc