发表于 | 分类于 ，

前言

ES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案。No more callback hell。
async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。
想较于 Generator，Async 函数的改进在于下面四点：

  • 内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样

  • 更好的语义。async 和 await 相较于 * 和 yield 更加语义化

  • 更广的适用性。co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）

  • 返回值是 Promise。async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用

阅读全文 »

发表于 | 分类于

Promise的状态

Promise是异步编程的解决方案之一，相比传统的回调（解决回调地狱）和事件机制更为合理和强大。
Promise实例有三种状态：

  • Pending：进行中
  • Resolved：已完成
  • Rejected：已失败

Promise实例的状态只能由 Pending->Resolved， Pending->Rejected。一旦Promise实例的状态发生改变，就不能被更改。

阅读全文 »

发表于 | 分类于

vue路由的使用

1、定义组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="hello">
    <h1 @click="info">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '我是Hello组件',
    }
  },
  methods:{
      info(){
          console.log('你点击了我');
      }
  }
}
</script>
阅读全文 »

发表于 | 分类于

什么是vuex

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。

什么时候使用vuex

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

阅读全文 »

发表于 | 分类于

前言

在使用vue开发的过程中，我们经常会接触到生命周期的问题。接下来让我们了解一下这些在一个标准的工程项目中的生命周期：

  1. 根组件实例：8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
  2. 组件实例：8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
  3. 全局路由钩子：2个 (beforeEach、afterEach)
  4. 组件路由钩子：3个 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
  5. 指令的周期： 5个 (bind、inserted、update、componentUpdated、unbind)
  6. beforeRouteEnter的next所对应的周期
  7. nextTick所对应的周期
    阅读全文 »

发表于 | 分类于

前言

vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue + wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破。

阅读全文 »