MVC和MVVM区别和VUE关系

发布时间:2024年01月20日

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。

文章来源:https://blog.csdn.net/emma20080101/article/details/135720430
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。