yugasun
Published on

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

Authors
  • avatar
    Name
    Yuga Sun
    Twitter

by yugasun from https://yugasun.com/post/you-may-not-know-vuejs-7.html 本文可全文转载，但需要保留原作者和出处。

上一篇中我们已经学会使用 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