什么是 MVVM ？

在搞清楚 MVVM 之前，首先要理解什么是 MVC  —  MVC 是后端的分层开发概念：

• M - model 数据层面
• V - view 前端的视图层
• C - controller 数据控制层

在实际应用中，web 系统在服务器上的组织方式一般是 MVC 架构 ：数据层、视觉层、控制层。

知道了 MVC，那么，什么是 MVVM 呢？

MVVM，Model-View-ViewModel 的缩写，是一种基于前端开发的架构模式，其核心是提供对 V 和 VM 的双向数据绑定，这样使得 VM 的状态发生变化时可以自动传递给 V，也就是所谓的“数据双向绑定”。

MVVM 是前端视图层的概念，主要关注于视图层分离。其中：

• M - 保存每个页面中的数据
• V - 每个页面中的 HTML
• VM - M 和 V 的数据交互需要它来帮助

MVVM 架构关系图解

Vue 的核心是 MVVM 中的 VM，它是一座桥，负责连接 M 和 V，保证数据和视图的一致性。这样，开发者只需关注业务逻辑，不必手动操作 DOM，复杂的数据状态维护交给 MVVM 统一管理，这种轻量级的架构让前端开发更高效、便捷。

Vue 中，MVVM 把前端的视图层分为了 3 个部分：

• M - 代表的是模型、数据，可以在 M 层中定义修改和操作数据的业务逻辑
• V - 代表的是视图、模板，负责将数据模型转化为 UI 展现出来
• VM - 在 MVVM 架构下，M 和 V 并没有直接联系，而是通过 VM 进行交互，VM 通过双向数据绑定将 M 和 V 连接了起来，使得 M 和 V 的同步工作完全是自动的。