MVVM 的全称是 Model-View-ViewModel，它是一种架构模式，最初是由微软定义，用于 WPF（微软的图形系统）和 Silverlight（WPF 的互联网应用派生品），它们的架构设计师之一 John Grossman 于 2005 年在他的一篇博客上发表了 MVVM。

特点

Model 层是数据层，它只关心数据本身，不关心数据如何操作和展示；View 是视图层，负责将数据模型转化为 UI 展现给用户；ViewModel 为视图提供引擎，用来处理业务逻辑。

MVVM 模式 - 图1
（图片来源于网络）

在 MVVM 模式中，View 层和 Model 层没有直接关联，ViewModel 层通过双向数据绑定将 View 层和 Model 层连接了起来。在 View 层中触发绑定事件后，ViewModel 会处理事件，改变 Model 层；Model 层和 ViewModel 之间的交互是双向的，Model 层的改变也会反应到 ViewModel 层，ViewModel 会通知 View 层更新视图。

MVVM 让 View 层和 Model 层独自工作，开发者只需关注业务逻辑，无需手动操作DOM，MVVM 的目的在于更清楚地将用户界面的开发与应用程序中业务逻辑和行为的开发区分开来。因为数据驱动，一切变得更加简单。

可用性

MVVM 完全解耦 View 层这种理念，对于 ViewModel 分离了许多逻辑，使得 Web 前端的单元测试用例编写变得更加容易。正因为 ViewModel 主要承担业务逻辑层，所以添加测试更加方便，粒度可控。

MVVM 模型也便于代码移植，比如 iOS 里面有 iPhone 版本和 iPad 版本，除了交互展示不一样外，业务逻辑的Model 是一致的，这样我们就可以以很小的代价去开发另一个 App。

但是随着代码量增加，由于 ViewModel 承担了很多业务逻辑，那势必 Model 层也会变得很复杂，对于非常大的应用程序来说，双向数据绑定“过度”操作 UI 会导致相当大的内存消耗。

总结

本小节简单介绍了 MVVM 模型的思想，MVVM 模式是目前主流的架构模式，前端的许多框架也使用了该模式，比如 Angular 和 Vue。MVVM 让开发者不需要手动操作 DOM，也不需要关心数据的同步问题，ViewModel 会协调好，所以我们只需要关心业务逻辑。MVVM 并不是唯一可选的模型，了解更多可点击这里。在这一节中，你需要掌握：

  • MVVM 三层的含义；

  • MVVM 的核心思想；

  • MVVM 的优点和缺陷。