Vue.js 系列教程 3：Vue-cli，生命周期钩子

这是 JavaScript 框架 Vue.js 五篇教程的第三部分。在这一部分，我们将学习 Vue-cli ，还会涉及真实的开发流程。这不是一个完整的指南，而是基础知识的概述，所以你可以了解 Vue.js 以及它的用途。

系列文章:

1. 渲染, 指令, 事件
2. 组件, Props, Slots
3. Vue-cli (你在这!)
4. Vuex
5. 动画

Vue-cli 和构建过程

如果你还没有读过上一部分关于 Vue.js 组件和 props 的内容，我强烈建议你在读这篇文章之前先读读上一部分，另外，部分内容缺乏语境。

Vue 提供了一个好用的 命令行工具 ，你可以选择一些构建工具启动项目, 还提供了简单的启动模板。这是个非常好的工具。在安装 vue-cli 之前，需要检查 node 的版本，以及升级 npm 或者 yarn 。首先要安装 vue-cli ( -g 表示全局安装 )

$ npm install -g vue-cli

有多种构建工具可供选择，但是在我们的例子中将使用 webpack:

$ vue init webpack

可以通过命令行进入目录安装所有内容，设置 `package.json` 文件，然后通过以下命令在 localhost:8080 端口启动本地服务：

$ npm run dev

程序运行成功！我喜欢这种简单的设置。你可以从 `/src/` 目录下的 APP 文件以及 `/components/`目录下的 `Hello.vue`文件开始项目。这非常好，因为你已经看到如何建立文件，以及如何进行文件的导入导出。

先看一下 `.vue` 这个文件扩展名，因为你还没有使用过 vue，所以你之前也没有遇到这种文件。

在 `.vue` 文件中，可以放任何组件内容。我们不需要再用 

黑色组件：

注意我在这里给组件中的 slot 设置了不同的样式，这是很好的工作方式，但这只是一种方法。通过 components，slots 和 props 构建程序的方法还有很多。这里的代码也只显示了部分内容。我建立了该示例的仓库 ，使用 Vue-cli 构建的。为了熟悉工作流程，我强烈建议使用 Vue-cli 构建组件以及通过 props 传递状态。只要完成初始设置，这种方式直观而且快速。

生命周期钩子

在讨论生命周期钩子之前，需要回顾一下我在第一篇文章中提到的虚拟 DOM。我提到 Vue.js 具有虚拟 DOM，但没有说明它的用途。

当你使用像 jQuery 的框架工作时，你可能听说过 DOM 并且通过 DOM 更新改变内容。最后，我们花了大量的时间来检查 DOM 在做什么并存储状态。相反，虚拟 DOM 是 DOM 的抽象表示，有点像复制品，但在这种情况下，它将是主副本。在这个系列文章中，当我们用 Vue 的方式使用状态时，我们创建状态并观察状态的更新。

当一个 Vue 实例更新后，Vue 将会检查它是否与之前的有不同之处。如果确实有不同，Vue 将会调用生命周期的方法，更新 DOM 变化的部分。这是为了提高效率，这种方式下，DOM 只更新需要的部分。

生命周期钩子提供了一些 方法 ，因此你可以在组件生命周期的不同时刻精确地触发某些操作。当我们将组件实例化时，组件会被创建，反之会被销毁，比如当我们使用 v-if/v-else 指令切换时。

可以使用的钩子有： beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, destroyed 。如果你想深入了解，可以看看 介绍每种方法的 API 文档。下面的小例子展示了部分工作原理（检查控制台）：

const Child = {
  template: '#childarea',
  beforeCreate() {
    console.log("beforeCreate!");
  }, 
 ...
};

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});

<div v-if="isShowing">
  <app-child>app-child>
div>

注意我们在这里使用了 v-if 而没有使用 v-show ，因为 v-if 会真实的创建或者销毁组件，而 v-show只是切换可见性（组件仍然存在于 DOM 中）。同样的，  也不会创建或者销毁， 而是激活或停用—— 因为组件仍然存在，只是没有使用。

正如组件中的方法会自动绑定 this，生命周期钩子也会自动绑定实例，所以可以使用组件的状态和方法。仍然不需要通过 console.log 查看 this 的指向！ *heartiest eyes* 尽管如此，你不应该在生命周期方法中使用箭头函数，因为它会绑定父类上下文，而不是 Vue 实例。

在下面的例子中，当组件最初被创建时，会有大量的元素被移动，所以我将使用 mounted 钩子函数为每一个组件触发相应的动画。你可以点击右下角的 return 按钮来看启动动画。

mounted() {
    let audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/rain.mp3'),
        tl = new TimelineMax();

    audio.play();
    tl.add("drops");

    //drops in
    tl.staggerFromTo("#droplet-groups g path", 0.3, {
      drawSVG: "0% -10%"
    }, {
      drawSVG: "100% 110%",
      repeat: 3,
      repeatDelay: 1,
      ease: Sine.easeIn
    }, 0.5, "drops");
 …
}

在这个例子中我使用了很多 Vue 提供的漂亮且复杂的  和  组件，我将在系列文章的最后一部分 Animation 中介绍它们，以及为什么及何时使用。

标签:  cli,  JavaScript,  vue,  vue-cli,  webpack