4.1.1 MVVM 模式

Vue.js 的介绍

Vue.js 的宫方文档中是这样介绍的：简单小巧的核心，渐进式的技术枝，足以应付任何规模的应用。

简单小巧指的是 Vue.js 压缩后仅有 17KB。渐进式（progressive）是指可以一步一步、阶段性地来使用 Vue.js，不必一开始就使用所有的技能点。

Vue.js 常见的高级功能

使用 Vue.js 可以让 Web 开发变得简单，同时也颠覆了传统的前端开发模式。Vue.js 提供了现代 Web 开发中常见的高级功能：

• 解耦视图与数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟 DOM（Virtual DOM）

Vue.js 的 MVVM 模式

与知名的前端框架 Angular.js 等一样，Vue.js 在设计上也是使用的 MVVM (Model-View-viewmodel）模式 。

• Model：负责数据存储
• View：负责页面展示
• View：负责业务逻辑处理（比如 AJAX 请求等），对数据进行加工后交给视图展示。

MVVM 模式

MVVM 模式是将 View 的状态和行为抽象化，并将视图 UI 和业务逻辑分开。当然这些工作由 viewmodel 完成，它可以取出 Model 的数据，同时处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM 模式的结构如下图所示。

使用 MVVM 模式开发的理由

• 稠合。视图（View）可以独立于 Model 变化和修改，一个 viewmodel 可以绑定到 MVVM 模式不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
• 可重用性。可以把一些视图逻辑放在一个 viewmodel 里面，让多个 View 重用这些视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（viewmodel)，设计人员可以专注于页面设计 。

提示

MVVM 模式要解决的问题是将业务逻辑代码与视图代码完全分离，使它们各自的职责更加清晰，后期代码维护工作更加简单。