1.2 MVVM族员——Vue.js

模型—视图—视图模型（Model-View-ViewModel, MVVM），本质上是MVC（模型—视图—控制器）的改进版，其最重要的特性即是数据绑定（data binding），此外还包括依赖注入、路由配置、数据模板等一些特性。

1.2.1 从MVC到MVVM

模型—视图—控制器（Model-View-Controller, MVC）模式，在Web 1.0时代曾被广泛应用于Web架构中，然而其诞生的时间却比Web早几年。最初，MVC被应用于桌面程序中，在PHP、JSP等脚本语言诞生之后，也逐渐成为Web开发的主流模式。

View视图层是用户能够看到并进行交互的客户端界面，如桌面应用的图形界面、浏览器端渲染的网页等；Model指业务模型，用于计算、校验、处理和提供数据，但不直接与用户产生交互；Controller控制器则负责收集用户输入的数据，向相关模型请求数据并返回相应的视图来完成交互请求，如图1.8所示。

图1.8 MVC模式

MVC模式实现了M和V的代码分离，M专注于数据，V专注于表达，C则在M和V之间架起了一座桥梁。即使采用同一个Model的数据，如果调用不同的View（如柱状图和表格），也会得到不同的页面呈现。这样的设计，不仅减少了Model层的冗余代码，使得Model和View更加灵活和易于维护，同时也简化了项目的架构和管理。

随着技术日新月异的更迭，MVC渐渐演化出更多的形态。虽然这些模式都有特定的名称，然而实际上它们都是MVC的衍生版本。因此，有的开发者也会将其统一称作“MV*模式”，MVVM即是其中的一种。

与MVC模式一样，MVVM的主要目的是分离视图（View）和模型（Model），ViewModel层封装了界面展示和操作的属性和接口。通过数据绑定，我们可以将View和ViewModel关联在一起，当ViewModel中的数据发生变化时，View也会同步进行更新，如图1.9所示。

图1.9 MVVM模式

MVVM模式解耦了视图和模型。在模式中，每一个视图都有对应的一个ViewModel，同时ViewModel与模型建立联系。当接收到用户请求后，ViewModel获取模型响应的数据，并通过数据绑定将相应的视图页面重新渲染。模型层的数据只需要传入ViewModel即可实现视图的同步更新，从而实现了视图和模型之间的松散耦合。

与MVC不同的是，MVC是系统架构级别的，而MVVM是用于单页面上的。因此，MVVM的灵活性要远大于MVC。如果将这里的M抛开，只看VVM的话，那这就是一个组件（如treeview）的设计模式。所以，MVVM模式也是组件化开发的最佳实践。

1.2.2 Vue.js简介

Vue.js是一套轻量级MVVM框架，由时任Google工程师的尤雨溪（现担任阿里Weex团队技术顾问）创作并开源。截至本书编写时，Vue.js已在GitHub获得star数9.3万个，而同为MVVM框架且更早诞生的React获得的star数不过9.5万个，Angular则是5.8万，如图1.10所示。

与其他重量级框架不同的是，Vue的核心库只关注视图层，并且提供尽可能简单的API以实现数据绑定、组件复用等机制，且非常容易学习并混入其他库。同时，Vue也完全有能力支持采用SPA设计和组合其他Vue生态库的系统。

图1.10 MVVM框架单指标影响力对比