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

原文：intro-to-vue-3-vue-cli-lifecycle-hooks

譯者：nzbin

這是 JavaScript 框架 Vue.js 五篇教程的第三部分。在這一部分，咱們將學習 Vue-cli ，還會涉及真實的開發流程。這個系列教程並非一個完整的用戶手冊，而是經過基礎知識讓你快速瞭解 Vuejs 以及它的用途。

系列文章:

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 <project-name>

能夠經過命令行進入目錄安裝全部內容，設置 `package.json` 文件，而後經過如下命令在 localhost:8080 端口啓動本地服務：

$ npm run dev

程序運行成功！我喜歡這種簡單的設置。你能夠從 `/src/` 目錄下的 APP 文件以及 `/components/`目錄下的 `Hello.vue`文件開始項目。這很是好，由於你已經看到如何創建文件，以及如何進行文件的導入導出。

先看一下 `.vue` 這個文件擴展名，由於你尚未使用過 vue，因此你以前也沒有遇到這種文件。

在 `.vue` 文件中，能夠聽任何組件內容。咱們不須要再用 <script type="text/x-template"> 包裹模板，如今咱們將按下面的邏輯建立更具備語義化的文件：

<template>
  <div>
     <!-- Write your HTML with Vue in here -->    
  </div>
</template>

<script>
  export default {
     // Write your Vue component logic here
  }
</script>

<style scoped>
  /* Write your styles for the component in here */
</style>

我針對 Sublime Text 創建了一個  Vue snippets 的倉庫 ，能夠針對 `.vue` 文件快速生成上述模板 ( 這是 vbase snippet 輸出的 )。 這個 是針對 atom 的 ( 它指出 Vue 須要 1+ 的版本，而 Vue 如今是 v2)，還有 這個 是針對 vscode 的。

這裏要注意的幾件事： 和 React 同樣，必須返回一個閉合的標籤，在這裏我使用一個 div 。在SVG中我也使用 <g> 元素。任何標籤均可以，可是整個模板必須包裹在一個標籤中。

你注意到咱們在這裏將使用 export default 編寫腳本，好比以前使用的 data function 或者 methods ，可是若是咱們想在這個 `.vue` 文件中使用子組件，咱們須要導入 import 它們 ( 以後詳細介紹 )。

你也會注意到在樣式標籤中有一個特殊的 scoped 屬性值。這使咱們可以很容易地將此組件的樣式僅限於此組件。咱們也會使用 <style> ，它將建立整個程序的樣式。我一般會爲應用程序建立一個通用的樣式表，包括像 fonts 和 line-heights 的共一樣式， 因此我將藉助 vue-style-loader 導入 @import 到 App.vue 文件的 <style> 標籤中。我也會使用 <style scoped> 標籤爲模板制定特殊的樣式，可是隻對當前模板有效！ Vue-cli 的好處就是讓你本身決定如何組織文件，並且你沒必要添加其它的依賴或模塊來限制樣式的做用範圍。

以前簡答地介紹了 slots ，當咱們在 Vue 組件中經過局部樣式標籤使用 slots 時，它們適用於具備 slots 的組件。這是很是有用的，由於你能夠很容易地切換組件和改變樣式。

在開發過程當中，使用特殊的 `.vue` 文件來組織 HTML，styles 和 JS 很是有幫助。我喜歡徹底分離的方式，能夠很清楚地看到每一部分，我還不適應這種緊密聯繫在一塊兒的方式。它能夠加快個人開發，並且我發現這種標記語言是語義化的。

你可能注意到語法高亮並不能自動識別 `.vue` 文件，因此我在 Sublime Text 中安裝了 這個 。

下面是將組件 導入/導出 文件的基本方式 ( 在 vue-sublime snippets 中是 vimport:c )：

import New from './components/New.vue';

export default {
  components: {
    appNew: New
  }
}

舉一個生活中的例子，看一下上次咱們用過的酒瓶標籤的案例，它的組件有兩個獨立的模板：

App.vue:

<template>
  <div class="container">

  <main>
      <component :is="selected">
        <svg class="winebottle" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 155 140 300">
          ...
      </svg>
      </component>
    </main>

    <aside>
      <h4>Name your Wine</h4>
      <input v-model="label" maxlength="18">
      <div class="button-row">
        <h4>Color</h4>
        <button @click="selected ='appBlack', labelColor = '#000000'">Black Label</button>
        <button @click="selected ='appWhite', labelColor = '#ffffff'">White Label</button>
        <input type="color" v-model="labelColor" defaultValue="#ff0000">
      </div>
    </aside>

  </div>
</template>

<script>
  import Black from './components/Black.vue'
  import White from './components/White.vue'
  ...
  export default {
      data: function () {
        return {
          selected: 'appBlack',
          label: 'Label Name',
          ...
        };
      },
      components: {
          appBlack: Black,
          appWhite: White,
          ...
      }
  }
</script>

<style>
  @import "./assets/style.css";
</style>

黑色組件：

<template>
  <div>
    <slot></slot>
  </div>
</template>

<style scoped>
  .label {
    fill: black;
  }
  .bottle, .wine-text {
    fill: white;
  }
  .flor {
    fill: #ccc;
  }
  .bkimg {
    filter:url(#inverse)
  }
</style>

注意我在這裏給組件中的 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>

See the Pen lifecycle hooks shown in a child component by Sarah Drasner (@sdras) on CodePen.

注意咱們在這裏使用了 v-if 而沒有使用 v-show ，由於 v-if 會真實的建立或者銷燬組件，而 v-show 只是切換可見性（組件仍然存在於 DOM 中）。一樣的， <keep-alive></keep-alive> 也不會建立或者銷燬， 而是激活或停用—— 由於組件仍然存在，只是沒有使用。

正如組件中的方法會自動綁定 this，生命週期鉤子也會自動綁定實例，因此可使用組件的狀態和方法。仍然不須要經過 console.log 查看 this 的指向！ *heartiest eyes* 儘管如此，你不該該在生命週期方法中使用箭頭函數，由於它會綁定父類上下文，而不是 Vue 實例。

在下面的例子中，當組件最初被建立時，會有大量的元素被移動，因此我將使用 mounted 鉤子函數爲每個組件觸發相應的動畫。你能夠點擊右下角的 return 按鈕來看啓動動畫。

See the Pen Vue Weather Notifier by Sarah Drasner (@sdras) on CodePen.

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 提供的漂亮且複雜的 <transition> 和 <transition-group> 組件，我將在系列文章的最後一部分 Animation 中介紹它們，以及爲何及什麼時候使用。