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。

相关推荐
乌啼霜满天24922 分钟前
Spring 与 Spring MVC 与 Spring Boot三者之间的区别与联系
java·spring boot·spring·mvc
阑梦清川2 天前
SpringMVC案例学习(二)--表白墙/图书管理系统1.0版本
spring·mvc·springboot·案例
网安_秋刀鱼2 天前
PHP代码审计 --MVC模型开发框架&rce示例
开发语言·web安全·网络安全·php·mvc·1024程序员节
HaiFan.2 天前
Spring MVC
java·spring·mvc
源码12152 天前
Asp.net Mvc 电脑销售系统
后端·asp.net·mvc
计算机毕设定制辅导-无忧学长3 天前
《深入理解 Spring MVC 工作流程》
java·spring·mvc
潜洋3 天前
Spring Boot教程之三:Spring Boot 与 Spring MVC 及 Spring的区别
java·spring boot·spring·mvc
清酒伴风(面试准备中......)3 天前
Spring MVC——针对实习面试
java·后端·spring·面试·mvc·实习
ac-er88884 天前
ThinkPHP6的ORM模型
开发语言·php·mvc
计算机学姐4 天前
基于Python的招聘信息推荐系统
开发语言·vue.js·python·mysql·pycharm·django·mvc