Vue.js 2.0 渐进开发应用实践

内容

导读：为什么要用 Vue.js

使用任何新框架和库其实都是为了解决我们当前开发所遇到的问题，或者能提升其开发效率。每个人的成本就是时间，好的工具则能够帮助我们节约时间，从项目角度而言，也就帮我们节约了成本。而 Vue.js 就是一款能降低开发成本、提升开发效率的工具，它能帮助我们从繁琐的 DOM 操作中解脱出来。开发中，我们设定好正确视图和数据的规则后，只需要关注数据的变化，视图上的内容是会随之变化的，而不需要我们手动再操作 DOM 元素进行修改。

此外，前端开发的模式也逐渐开始往组件化方向转变，Web Components 的概念也开始逐渐成为标准，拥有自己独立的 HTML 片段、JS 文件以及 CSS 样式，这样在使用时可以不用担心对自己本身业务上的代码造成影响。Vue.js 对这一概念也进行了自己的实现，这样对于提升代码复用、拆解大型项目，都有着很好的帮助。

兼容性

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

内容列表

本系列将从零开始介绍 Vue.js，内容安排如下：

• Vue 的基础概念及构建开发环境
• 网页开发的基础内容：数据渲染、事件绑定和表单处理
• 提升代码复用性（1）：指令和组件
• 提升代码复用性（2）：混合属性、过滤器、过渡和插件
• 开发线上项目必经过程：前后端联调及打包发布
• 数据请求、文件上传、解决跨域问题
• 第三方库与业务代码分离、多页面分离资源引用
• 单页应用的基础：vue-router
• 路由声明及使用
• 利用导航守卫实现权限控制
• 路由优化：解耦与按需加载
• 组件间通信及构建大型应用所需的状态管理：Vuex
• Vuex 的基本用法
• Vuex 的常见使用技巧
• 实战：日历式的 TODO List
• 提升 SEO 和加快首屏显示时间：服务端渲染
• 预渲染
• 服务端渲染官方库：vue-server-renderer
• 服务端渲染框架：Nuxt.js
• 编写高质量的 Vue 项目：测试用例
• Karam Mocha：单元测试
• Nightwatch：E2E 测试

期望能使帮助开发者快速掌握 Vue.js，了解其使用方式和使用场景，并构建可上线的真实项目。

适合阅读人群

本系列的文章适合以下人群阅读：

• 对 Vue.js 感兴趣但尚未使用的前端开发者；
• 对 Vue.js 处于实验阶段但尚未正式上线或使用规模还不大的开发者。

版本约定

本系列内容采用 Vue.js 版本为 2.5.6，大部分代码都会使用 ES6，希望读者对 ES6 有一定的了解。

第01课：Vue 的基础概念及构建开发环境

数据与视图

Vue.js 最大的特点之一就是数据驱动视图，也就是说当数据发生变化时，视图（即用户界面）也随之发生变化，而不需要我们手动去更新 DOM 元素。

上图中的视图很好理解，就是我们开发的用户页面，即 DOM 元素；模型则为在这个页面上包含的数据以及业务逻辑，即 JavaScript 对象；而视图模型就是将这两者联系起来的方式，也就是通过 Vue.js 来编写的内容。

组件

组件是 Vue.js 中的重要概念，大部分的应用界面都可以被抽象成组件或多个组件的组合。简单来讲，组件就是一段封装好的、拥有自己独立 HTML 模板、CSS 样式和 JS 的代码段，且被使用的时候不会影响页面上的其他代码。而在 Vue.js 中，可以这么去理解组件：

• 自定义的标签名；
• 独立的 HTML 模板和 CSS 样式；
• 独立的作用域，即包含自己的数据业务模型，也就是 Vue.js 实例。

如果说前端之前考虑的都是如何开发“页面”，那在使用 Vue.js 的过程，我们需要把“页面”这一个略显庞大、多样的概念逐渐转变成高内聚、单一功能的“组件”概念，而页面则变成了多个单一功能组件叠加后的结果。

Vue.js 的 Hello world

按照惯例，我们还是先会使用 Vue.js 来构建一个 Hello World 的页面。

首先是引用方式，可以直接在 HTML 插入 script 标签，像引用任何一个简单的 JS 文件一样。

引入后得到了一个全局 Vue 的对象，可以直接用 new 的方式新建一个 Vue 的实例：

var vm = new Vue({ … })

然后下一步就是如何与 DOM 元素建立联系，并且渲染内容了。

如图所示，我们得到了一个理所当然的 Hello World!

从上面这个例子可以看到几个具体的用法：

• el 选项为一个元素选择器，标明了当前 vue 实例所挂载的根元素，也就是确定了 vue 实例影响的范围，在这个元素之外的 DOM 元素不受当前 vue 实例。
• data 则是一个对象，声明了当前实例的数据（也就是 Model 层面的内容）。
• 在 HTML 中，使用双大括号{{ }}来标明这一部分内容是需要被实例中的数据重新渲染的。我们称之为声明式渲染（Declarative Rendering）。

当然，如果 Vue.js 仅仅做了这一次数据渲染的工作，那就变成了前端模板引擎，而不是什么 mvvm 框架了。

那如何体现 Vue.js 的数据驱动视图的特点呢？我们可以手动调用上例中的 vm，修改 vm 中的 message 数据（可以在浏览器的 console 里面直接修改）。

vm.message = \’Hello GitChat\’

可以看到 #app 元素中渲染的内容就变成了“Hello GitChat”，而在这个过程中，我们没有手动去获取并修改 DOM 值，这一操作就完全交由 Vue 来实现了，我们只是事先声明好了渲染规则，也就是建立了数据与视图的绑定。

Vue 实例和选项

Vue 的实例就是通过 new Vue() 的方式建立的，每个 Vue 的应用也都是由此开始的。

在创建 Vue 实例的时候，我们可以传入一个选项对象，大致包含以下几种，这里先简单介绍一下。

与视图、模板相关的

• el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，只在由 new 创建的实例中遵守。
• template：一个字符串模板。
• render：渲染函数，接收createElement方法来创建VNode。

与数据、业务逻辑相关的

• data：实例的数据对象。
• methods：实例方法，可用于监听 DOM 事件。
• props：作为组件时，接收到外部传递进来的参数。
• computed：计算属性。
• watch：观察模式，监听数据的变化并执行对应的函数。

生命周期相关钩子函数

• beforeCreate()
• created()
• beforeMount()
• mouted()
• ……

其他

• components：需要使用的其他 Vue 组件对象。
• mixins：混合对象。

这里没有必要一下子全部记住或理解，这些选项的使用方式和规则都会逐渐贯穿在整个课程当中，在使用时会逐一详细解释。

实例生命周期

Vue 实例在被创建之前有一系列的初始化过程。例如，设置数据监听、编译模板并挂载到指定 DOM 元素上、绑定事件等，而在实例被销毁后也需要进行取消监听、移除元素等操作。这一个从开始到结束的过程称之为实例的生命周期，而在整个过程中，Vue.js 会在特定的时机运行特定的函数，并允许用户将自己的业务代码传递进来，这些函数被称之为生命周期钩子函数（Lifecycle Hooks）。

这是 官网 给出生命周期图，具体所包含生命周期包括 create（创建）、mount（挂载）、update（更新）、destory（销毁）阶段还有一个activated（激活）阶段（需要包裹在 < keep-alive> 标签下才会触发）。

下面来看下这些阶段所包含的钩子函数和使用区别：

• beforeCreate：最先被调用，此时实例已经创建，但尚未绑定数据，进行数据监听。
• created：此时已建立数据监听，与 beforeCreate 最大的区别在于，此时在函数内可以通过 this 来访问到 data 对象中的数据。
• beforeMount：在 created 之后调用，但此时尚未挂载，所以实例的模板还并不存在当前的 HTML 文档中，无法获取 DOM。
• mounted：真实挂载到 HTML 文档中，可以获取 DOM 值。
• beforeUpdate：数据更新前触发，可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• updated：由数据更改导致的虚拟 DOM 重新渲染后调用该函数。
• beforeDestory：实例销毁之前调用，在此函数内，this 实例仍然完全可用。
• destroyed：实例彻底被销毁，并解绑之前的所有数据和事件。
• activated：当组件被 < keep-alive> 包裹并激活时调用。
• deactivated：与 activated 相对应，当组件被停用时调用，被 < keep-alive> 包裹的组件并不会直接被销毁，虽然从视觉上是被移除了，但并不会调用 beforeDestory 和 destroyed 函数，下次被激活时组件也同样不触发 beforeCreate 和 created 函数。

具体效果及运行顺序可以参考该 示例。

使用 Vue-cli 构建开发环境

刚开始的时候，我们经常会纠结于如何设置目录结构，特别是在多人开发构建大型项目的时候，如果目录没有一个清晰的描述和规划往往会导致项目的混乱和冲突。Vue.js 提供了一个官方的命令行工具 Vue-cli，能帮助我们快速构建单页应用结构，并提供许多方便开发的功能：

• 热重载，无需手动刷新页面即可看到修改效果。
• 预处理器，可以使用 ES6 或 SASS/LESS 等不能直接在浏览器中使用的语言开发，将其编译成可执行的 JS 或 CSS。
• 支持与 eslint 代码风格检查，能保证团队代码风格一致。
• 打包发布，将业务代码合并压缩成单个 CSS 和 JS 文件，减少 HTTP 请求。
• 代理请求，方便前后端分离的项目，本地可直接请求其他远程服务器上的后端接口服务。

那如何来安装和使用 vue-cli 呢？非常方便，首先需要安装 Node 和 NPM 环境，可以访问 官网 直接下载对应操作系统的安装包进行安装。

安装成功之后，通过命令行安装 vue-clic：

npm install -g vue-cli

这样我们就可以全局使用 vue-cli 命令行了。vue-cli 支持以下 6 种模式的脚手架：

• Webpack：使用 Webpack 作为构建工具，而且包含了热更新、代码检查、测试等配套工具的安装。
• webpack-simple：简化的 Webpack 版，仅包含了 vue-loader。
• browserify：与 Webpack 型脚手架功能类似，但用 browserify 替换掉 Webpack。
• browserify-simple：同 webpack-simple。
• pwa：pwa（progressive web app）渐进式网页应用模板，基于 Webpack 构建。
• simple：最简单的模板，一个 HTML 引用了 Vue.js。

我们可以使用以下命令行来选择脚手架进行安装：

vue init (上面6种名称任选其一) (新建的项目名)

以 Webpack 为例：

我们可以依次输入项目名称、描述、作者等描述信息，然后也可以选择所需要的功能，如路由、ESlint、单元测试、E2E 测试等。

生成的目录结构如下：

• build：Webpack 相关的配置文件，包含热加载、编译、代码风格检查等
• config：基础配置文件，包括设置代理服务，打包后的文件路径、文件名等
• src：业务代码目录
• assets 资源文件
• components 组件文件
• router 前端路由
• App.vue 根组件
• main.js 入口文件、引入根组件、创建 Vue 实例
• static：静态资源文件目录
• test：测试文件目录
• index.html：HTML 文件模板，也就是 Vue.js 挂载的模板

然后我们就可以根据上图的提示，进入文件目录，安装依赖并运行项目

npm insall

npm run dev

Webpack 在此的作用是将可以分析项目结构，根据依赖，加载对应的模块，并对指定的模块（如 ES6 编写的 JS，SCSS 编写的 CSS）进行编译，使之能在浏览器中正常运行。

只要使用合适的 Loader，Webpack 就可以将所有文件都当做模块来进行处理，输出你想要的结果。而在此将使用Vue-loader（Vue-cli 已在 Webpack 脚手架中已配置好）使得项目的开发更清晰，更符合组件化的特点。

所以我们在该脚手架中看到的 App.vue 的写法会是：

这和首个 Hello World 的例子看起来并不一样，在 .vue 文件中，HTML、JS 和 CSS 分别被包含在 template、script、style 标签中，这和我们之前说的组件化相当契合，独立的模板和样式，以及 JS 代码。当然，这样的写法直接放到浏览器中当然是无法运行的，所以在此配置了 Webpack Vue-loader，可以将这样写法的代码编译成浏览器可执行的 HTML、JS 和 CSS 代码。

小结

以上大致介绍了 Vue.js 中的数据绑定和组件化两大重要概念，实现了第一个 Vue.js 的 Hello World。Vue.js 可以接受一个选项对象，创建实例，每个实例包含自己的生命周期。在编写大型项目的时候，我们往往会使用 vue-cli 来构建项目，并且通过 Webpack 和 Vue-loader 可以用组件化的方式来开发 Vue.js 项目。