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

譯者：nzbin

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

系列文章:

渲染, 指令, 事件

組件, Props, Slots

Vue-cli?(你在這!)

Vuex

動畫

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 intl.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 中介紹它們，以及為什么及何時使用。

轉載于:https://www.cnblogs.com/nzbin/p/6380663.html

總結

以上是生活随笔為你收集整理的Vue.js 系列教程 3：Vue-cli，生命周期钩子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。