uni-app 跨端开发 H5、小程序、IOS、Android（三）：理解 uni-app 框架 MVVM 思想

上一篇：

uni-app 跨端开发 H5、小程序、IOS、Android（二）：开发工具 HBuilderX 使用技巧

大家好，我是黑马腾云。

这是一个原创系列连载文章，基于企业真实项目案例分享经验，带你快速入门 uni-app 开发！欢迎点击头像关注，避免迷路！

上一篇文章体验了 HBuilderX 编码飞一般的感觉，此文来聊聊 MVVM 模式。

uni-app 是一个使用 vue.js 开发前端应用的框架，使用 vue 的语法+小程序的标签和 API。由于 vue 采用 MVVM 软件架构设计模式，因此 uni-app 框架也自然是基于 MVVM 模式。

MVVM 实际是由 MVC 演化而来，因此先了解下 MVC 模式。

一、MVC 模式

MVC 是三个单词的首字母：Model、View、Controller。

Model：模型层，数据的增删改查

View：视图层，前端页面

Controller：控制层，处理业务逻辑

早期的软件，前后端都放在一个页面中，典型的有 asp、原生 php 等脚本语言（当然 php 也有一些基于 MVC 的框架，如 ThinkPhp、YII 等），这种模式前端页面还夹杂着后端逻辑代码，前端人员还需要能看懂一定的后端脚本，使得项目维护起来相当麻烦。

MVC 模式很大程度促进了软件行业的发展，使得项目中页面的前后端分离成为现实，增加了软件的可维护性。

我们以用户在页面上的一次操作为例，演示 MVC 的过程如下图：

以登录功能为例：

很多系统都有登录功能，我们在登录界面点击登录按钮，会执行哪些操作？

1、我们看到的登录页面即为视图，当点击登录按钮就会请求 Controller 层的登录接口地址。

2、Controller 层根据请求匹配到对应的登录路由后，进入控制器进行登录相关的业务逻辑操作。根据页面上用户填写的账号密码，Controller 层请求 Model 层进行查询用户信息。

3、Model 层根据控制器层的需求查询数据库获取对应的用户信息，并将结果返回 Controller 层。Model 层一般对应数据库实体。

4、Controller 根据 Model 返回的用户信息，结合用户输入的密码判断用户信息是否正确，最后在将判断结果返回 View 层。

5、View 界面获取 Controller 返回的登录结果，如果登录失败则提示，如果成功则进入系统。

可以看到此模式将 View 层和后端逻辑分开，前端和后端不再夹杂在一起，使得前端人员专注于前端开发，只需要根据后端的接口文档规范调用接口即可；而后端人员也不必关心前端的 HTML、CSS、JS 等实现细节。

基于这种思想，产生了很多 MVC 模式的框架。asp.net mvc、spring mvc、thinkPhp 等等都是基于 MVC 模式的。

在很长一段时间 MVC 模式非常流行，并且现在也还有很多公司继续在使用。

但是这种模式也不是完美的，虽然在页面的维度将前后端分离开了，但是分离还不够彻底；有的人就在想，有没有可能在项目的维度，把前端和后端分离成单独的项目呢，这样一来，前后端人员就可以完全分开了。

2005 年，微软的 3 位 WPF 和 Silverlight 架构师 Ken Cooper、Ted Peters 和 John Gossman 发布了 MVVM 软件架构设计模式。（如果你曾用过微软系技术栈，一定熟知那段时间的技术 WPF、WCF、WF 等等，感兴趣的自己去研究）

再到后来，随着前端技术的蓬勃发展，各种框架层出不穷（React、Angular、Vue 等等）；同时基于 restfull 风格的后端接口技术也在不断演进，MVVM 模式更是得到了极大的应用。

接下来讨论下 MVVM 这种软件设计思想，以便更好的理解 uni-app 框架。

二、MVVM 模式

有人戏称 MVVM 模式是：前后端分手大师！

Model–View–ViewModel(MVVM) 是一个软件架构设计模式，它的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。

1、MVVM 与传统模式的区别

回到前端技术上来，在原生 Javascript 或 JQuery 时代，我们要获取或改变页面上标签数据，需要对 Dom 进行操作，而使用 MVVM 模式，则无需前端人员再去对标签赋值，一切都由框架实现了。

二者区别见下图：

如果你使用过 JQuery，则体会的更加深刻，在 MVVM 模式中，用 ViewModel 代替了用 JS 或 JQuery 手动操作的过程，它充当核心调度者协调器的作用，实现了数据的双线绑定。

2、MVVM 介绍

MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

MVVM 组成部分如下图：

分层设计一直是软件架构的主流设计思想之一，MVVM 也不例外。

• View 层

View 是视图层，也就是用户界面，主要由前端人员构建。

前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Marko、Pug、Jinja2 等等，各大 MVVM 框架如 KnockoutJS，Vue，Angular 等也都有自己用来构建用户界面的内置模板语言。

• Model 层

• ViewModel 层

在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。

由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。

看到了吧，View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。KnockoutJS 是最早实现 MVVM 模式的前端框架之一，当下流行的 MVVM 框架有 Vue，Angular 等。

既然如此，接下来在 uni-app 中演示如何用 MVVM 模式实现双向数据绑定。

三、MVVM 双向数据绑定

打开 HBuilderX，利用前文讲解的方式创建一个 uni-app 默认项目 test，接下来分析每个页面的对应的组成以及双向数据绑定。

1、uni-app 中的 MVVM

uni-app 项目中，每个页面后缀为.vue，包含三个部分：template、script、style。

template 部分对应 View，对应一些 HTML 代码，css 样式写在 style 标签中。

script 标签里的 data 部分对应 Model。

整个 script 对应的是 ViewModel，如上所述，不仅包含页面视图数据，还包含了页面行为。

2、双向数据绑定演示

所谓双向绑定是指 Model 里的数据可以直接显示在界面上，而界面上进行的操作也可以直接修改数据对象。

如图所示，model 层定义了 title 对象，并通过{{title}}绑定在 text 标签上，页面加载时在界面显示了 title 的值。同时通过 :value 把 title 的值绑定到 input 标签上，在界面上输入内容改变文本框的值，通过自定义 change 事件改变 title 对象的值，可以看到 title 的值变化后也直接反应在了界面上。

这就是数据双向绑定，这种模式无需再对各个标签进行获取或赋值操作，而如果用 Js 或 JQuery 则需要通过对 Dom 的操作才能实现，这就是他们的最大区别。

了解了框架思想，下一篇文章，我们开始创建 uni-app 项目并分析其目录结构。

讨论时间：

你了解的前端框架中，还有哪些是基于 MVVM 模式的呢？

作者介绍：

黑马腾云，码农、创业者、终身学习者！

乐于分享技术、创业、人生思考。关注我，一起为人生喝彩！

上一篇：

uni-app 跨端开发 H5、小程序、IOS、Android（二）：开发工具 HBuilderX 使用技巧