你也许不知道的Vuejs - 使用ES6快乐的玩耍

by yugasun from yugasun.com/post/you-ma… 本文可全文转载，但须要保留原做者和出处。

上一篇中咱们已经学会使用 babel 将 ES6 转化为 ES5 了，而且展现了一些 ES6 代码，这一篇将重点聊聊 ES6 在 Vuejs 项目中一些部分应用。

什么是ES6

摘自 ECMAScript 6 简介：

你们习惯将 ECMAScript 6.0 简称为 ES6，它是 Javascript 语言的下一代标准，它的目标，是使得 Javascript 语言能够用来编写复杂的大型应用程序，成为企业级开发语言。

说是下一代，其实早在 2015 年 6月就正式发布了（因此又称 ES2015），截止今日已经快3年了，很快 ES7/ES8 都要出来了，因此做为前端开发者，学习 ES6 已是个必然命题了。不要再问有没有必要学习之类的问题了。

关于 ES6 的基础知识，推荐 阮一峰 老师的 ECMAScript 6 入门，看完你就会以为，并不难。至于有些后端的朋友跟我聊到说 ES6 彻底不明白，那是由于大家思想还停留在过去 jQuery 的时代，那个时候只须要随便复制几段代码，而后写几个 js 函数，就能够搞定不少后端模板页面了，可是今非昔比了，因此若是大家想深刻了解前端，作一个全栈工程师，仍是静下心来，好好阅读这篇 ES6 教程。代码这东西，不仅是须要会用，更重要的是须要知其因此然。就像你一个 python 同事看到一段代码时问我，为啥 JS 引用一个模块时是 import Vue form 'vue'，而不是 from 'vue' import Vue 同样，这个我是无法解释的，由于ES6语言的规范就是这样的啊~

模块的定义和引入

复制一份上一篇中的项目，在 src 目录下建立一个 utils.js 文件，内容以下：

/** * 简单的深拷贝实现，我的常常这么使用 * 这里obj中不能包含特殊类型值：undefined,NaN,function类型值 * @param {object} obj */
export function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

/** * log 函数的二次封装，这里只是为了演示 * @param {any} content */
export function log(content) {
  console.log(`[Yuga log]: ${JSON.stringify(content)}`);
}
复制代码

它就是经过 export 暴露出了两个工具函数。

修改 app.js 代码进行引入使用：

import './styles/app.scss';
import Vue from 'vue';
import userinfo from './info';
import { deepClone } from './utils';
import * as utils from './utils';
import hello1 from './hello1.vue';
import hello2 from './hello2.vue';

new Vue({
  el: "#app",
  template: '<div><hello1 v-bind:info="userinfo"/><hello2/></div>',
  data () {
    return {
      userinfo: deepClone(userinfo)
    }
  },
  components: {
    hello1,
    hello2
  },
  created () {
    // 你会发现这里也同时改变了源原数据 info ，
    // 因此须要用到深拷贝源数据赋值给 data 中的 info
    this.userinfo.name = 'yugasun111'
    utils.log(userinfo)
  }
});
复制代码

上面分别演示了 5 种模块引入方法，不管是哪种，其实这个要看该模块是如何 export 的，对于任何一个 npm 模块，若是它支持 ES6 方式引入，它通常都会使用 export 或 export default 关键字暴露出一个对象（任何一个js数据类型），只不过 export default 指定了默认输出，这样用户就不用阅读接口文档，就能够按照本身须要加载该模块，并修改成本身喜欢的名称来使用。而对于有些模块（如上面的 utils.js）能够经过 export 关键字来实现多个子模块的输出，这样用户就能够根据我的须要来引入对应的子模块，前提是得知道其内部子模块名称才行。 而 import 'normalize.css' 至关于全局引入了，将该模块的全部内容一并引入。

更多细节讲解，建议阅读这篇文章： ES6 Module 的语法

这点对于 require 的引入方式，是无法作到的，而著名的 tree-shaking 功能就是依赖 ES6 的这种模块系统。

异步编程

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数）更合理和更强大。它由社区最先提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。详细 Promise 介绍能够阅读这篇博文：异步编程之 Promise； ES2017 标准又引入了 async 函数，是的异步操做变得更加方便。更详细的介绍在这里：async 函数。

有的人说有了 async 函数 就再也不须要 Promise 了，我以为是不对的，由于不少异步模块都是先基于 Promise 封装，而后才能通过 async/await 函数来操做的。固然把二者结合起来用，能够完成更增强大的异步编程操做，Vuejs 代码也变得更加灵活、简介和强大。

这里既然是 Vuejs 实战，我就不讲它们的基础用法了，来看看如何用在实际项目中吧~

要想在项目中使用 async/await 函数，就必须有相关 babel 插件来支持，由于 async/await 语法属于 ES2017 规范的内容，因此须要引入 babel-preset-stage-2 插件来转化，固然还有 stage-0, stage-1, stage-3 等，这里参考 vue-cli 经常使用 stage-2，直接安装：

npm install babel-preset-stage-2 babel-plugin-transform-runtime --save-dev
复制代码

而后在 .babelrc 文件中添加配置：

{
  "presets": [ "env", "stage-2" ],
  "plugins": [
    "transform-runtime"
  ]
}
复制代码

如今咱们的语言支持，配置好了，如今开始使用。

上面的代码中，咱们的 userinfo 是咱们经过 info.js 硬编码，而后在 app.js 中引入，经过 props 传递给了 hello1.vue 组件，下面咱们经过请求接口方式来获取。

先安装 vue-axios-plugin 插件，来提供网络请求服务：

npm install vue-axios-plugin --save
复制代码

而后在 app.js 中导入并使用：

// 引入插件
import VueAxiosPlugin from 'vue-axios-plugin';
// 使用插件
Vue.use(VueAxiosPlugin)
复制代码

这样在应用中的组件中都会在 this 上绑定一个 $http 属性，它由 get 和 post 方法，具体使用文档：vue-axios-plugin文档。

而后在 hello1.vue 中建立请求方法 getUserInfo，并在 created 钩子函数中调用:

// ...
methods: {
  async getUserInfo () {
    try {
      const res = await this.$http.get('http://yapi.demo.qunar.com/mock/4377/userinfo');
      this.info = res.data
    } catch (e) {
      console.log(e);
    }
  }
},
// ...
复制代码

从新运行项目，审核元素，发现成功发起了 GET 请求，并显示了接口数据。

注意：其实 Vuejs 的 methods 属性中全部的方法均可以定义为 async函数 来使用，包括 Vuejs 的生命周期函数，好比 created。

能够发现使用 async/await 语法比使用 Promise 的链式语法简洁多了，并且阅读性更强了。

高级异步编程

由于本人工做主要是在大数据可视化，常常在绘制某张定制化图形时，须要同时依赖多个接口（不要问我为何会有这么多接口？为啥后端不一次性传给我？由于我不想跟他们撕逼，╮(╯▽╰)╭哎），并且必须在这几个请求都处理完后，才能开始处理数据，多的时候一张图行依赖6个接口，固然我能够在一个 async函数 中写6行 await 语法的请求，而后逐个处理，可是这样效率过低了，可是这6个请求是能够并行执行的。这时就能够结合 Promise.all 高级方法来处理。这样我能够同时发起六个请求，而后统一处理接口返回数据。为了方便，这里演示同时请求2个url，多个的是同样的。咱们再在 hello1.vue 中添加一个 get2UserInfo 方法，而后在 created 中调用下，更新后的 hello1.vue 以下：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <a v-bind:href="info.site">{{ info.name }}</a><br>
    <a v-bind:href="user1.site">{{ user1.name }}</a><br>
    <a v-bind:href="user2.site">{{ user2.name }}</a><br>
  </div>
</template>
<script> export default { name: 'hello1', data () { return { msg: 'Hello Vue.js', info: {}, user1: {}, user2: {} } }, methods: { async getUserInfo () { try { const res = await this.$http.get('http://yapi.demo.qunar.com/mock/4377/userinfo'); this.info = res.data } catch (e) { console.log(e); } }, async get2UserInfo () { try { const res = await Promise.all([ this.$http.get('http://yapi.demo.qunar.com/mock/4377/userinfo1'), this.$http.get('http://yapi.demo.qunar.com/mock/4377/userinfo2'), ]) this.user1 = res[0].data; this.user2 = res[1].data; } catch (e) { console.log(e); } } }, created () { this.getUserInfo(); this.get2UserInfo(); } } </script>
<style lang="scss" scoped> h1 { color: $green; } </style>
复制代码

再次运行项目，能够发现页面在初始化的时候同时发起了3个请求，并正常渲染出了接口数据。经过控制台能够看到这三个请求是并行发起的。

注意：这里的 Promise.all() 的参数是一个函数执行队列，它们会同时发起，而后都请求成功后，会将队列的每一个任务的结果组装成一个结果数据，而后返回。

总结

其实要把讲ES6讲完，实在是太难了，写本书都很难讲好，我这里只能说是班门弄斧一下，结合我在 Vue 中的相关实践，对相关功能作个简短介绍，但愿能起到引导的做用。不太了解的朋友，能够认真阅读下文首提到的阮一峰老师的文章。接下来后面的文章将所有使用 ES6 的语法编写代码。

源码在此

专题目录

You-May-Not-Know-Vuejs