MVVM（Model-View-ViewModel）和MVC（Model-View-Controller）是两种常见的软件架构设计模式，通常用于分离应用的不同关注点。尽管它们的目标相似，但在处理用户界面和业务逻辑之间的交互有一些不同的设计理念和实现方式。所以在面试时，面试官总喜欢问它们二者的有什么区别。
一、架构介绍
MVC（Model-View-Controller）
- M（Model）： 模型层。是负责处理核心数据和业务逻辑的部分，模型对象负责在数据库中存取数据。
- V（View）： 视图层。负责显示数据和用户交互的结果，是用户界面。视图会依据模型数据来创建。
- C（Controller）： 控制层。是Model和View的中介，接受用户的输入并调用模型和视图去完成需求。控制层只负责业务逻辑，并按照需求更新模型和视图。要注意，它本身不会输出任何东西和做任何处理。
MVVM（Model-View-ViewModel）
- M（Model）： 模型层。也是负责处理数据逻辑，只不过是从数据库映射出来的。所以我们也可以说是与数据库对应的Model。
- V（View）： 视图层。用来展示数据的用户界面。
- VM（ViewModel）： 视图模型层。是视图和模型的桥梁。因为模型层中的数据通常不会和视图层中的控件相对应，所以要再定义一个数据对象来专门对应视图层的控件。很明显，视图模型层的任务就是把模型对象封装成可以显示和接受输入的界面数据对象。
要注意的是，在 Vue 框架中，MVVM 中的 M 指的是后端的数据，V 是节点数，VM 是 new 出来的对象。
注意： View 与 ViewModel 之间会通过双向绑定来建立联系，这使得当 View 发生变化时，会自动更新 ViewModel ，反之亦然。
二、区别
三、MVVM的优势
- MVVM 是利用双向绑定机制来实现模型和视图的自动更新，避免了MVC的手动更新。
- MVVM 更加清晰地分离了业务逻辑和UI逻辑，让开发者不必过于考虑UI界面，MVC 虽然也有分离关注点，但仍需处理较多UI代码。
- 因为 ViewModel 不再依赖具体的视图来实现，所以更容易进行单元测试，而Controller中通常包含一些UI逻辑，让单元测试更加复杂且容易受UI变化的影响。
- MVVM 通过事件绑定机制，减少了样板代码，让代码更加简洁、易于维护。但在 MVC 中需要编写大量代码来管理视图状态和时间处理。
- 相比于 MVC 通过手动来同步数据和视图，MVVM 则是利用数据绑定特性，让用户界面可以立即响应变化，提供了更好的用户体验。
注意： MVVM 并不是用 VM 完全取代了 C，ViewModel 是为了抽离 Controller 中展示的业务逻辑而存在的，并不是为了取代 Controller，还是有许多的视图操作应该在 Controller 中实现的。
四、总结
MVVM相比MVC具有多项优势，特别是在简化开发流程、提高代码可维护性和增强用户体验方面表现突出。当然，选择哪种架构模式最终取决于具体的应用场景和团队的技术栈偏好。如果你正在开发一个需要高度动态交互的前端应用，MVVM可能是一个更好的选择。而对于那些更传统的Web应用或服务器端渲染的场景，MVC依然有其不可替代的价值。
