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。

相关推荐
budingxiaomoli2 天前
Spring Web MVC 知识总结
spring·mvc
虾米Life3 天前
MVC与MVVM 架构
架构·mvc·mvvm
笛卡尔的心跳5 天前
Spring MVC 注解
java·spring·mvc
小松加哲6 天前
Spring MVC 核心原理全解析
java·spring·mvc
那个失眠的夜6 天前
RESTful 语法规范 核心注解详解
java·spring·mvc·mybatis
羌俊恩6 天前
Centos环境django项目部署过程
django·flask·centos·mvc·mtv·web项目框架
Foreer黑爷8 天前
Spring MVC原理与源码:从请求到响应的全流程解析
java·spring·mvc
曹牧9 天前
Spring MVC中使用HttpServletRequest和HttpServletResponse
java·spring·mvc
曹牧9 天前
Spring MVC配置文件
java·spring·mvc
CPUOS201010 天前
嵌入式C语言高级编程之MVC设计模式
c语言·设计模式·mvc