MVC和MVVM区别和VUE关系-Toy模板网

这篇具有很好参考价值的文章主要介绍了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。文章来源地址https://www.toymoban.com/news/detail-815358.html

到了这里，关于MVC和MVVM区别和VUE关系的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！