tags: Vue.js ItIron2020

前言

昨天我們介紹了vue實體中的watch屬性，到目前為止我們都在探索vue中的各種屬性，今天的主題會較為特別一些，我們將探討vue實體從建立到銷毀究竟會經過哪些階段，我們又分別能在這些階段做些什麼! 那我們馬上開始吧!

認識vue lifecycle hooks

有在學vue的人對以下這張圖片肯定不陌生，來自vue的官方網站，介紹vue實體中的各個階段。

紅框的部分就是主要的階段(Hooks)，其中包括

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

另外還有用於keep-alive標籤的兩個階段(待會兒解釋)

• activated
• deActivated

為什麼我需要認識hooks?

問得好! 原因在於很多時候我們需要在特定的階段執行特定的操作，比如說畫面載入前運行loading動畫、畫面載入後執行某個函數之類的。你需要知道每個階段分別可以做什麼操作，否則一不小心在錯誤的階段做錯誤的事情(資料還沒產生就想拿資料來運算等)，你的程式碼就會是真正的藝術 - 爆炸

那每個hook做了什麼、我又能做什麼呢?

問得更好了! 其實網路上已經有很多很多說明lifecycle的文章，我這邊僅就我個人的理解做了簡單的整理，更詳細的說明我會放在後面當參考文章，如果有任何疑問的話也可以看一下:D

• beforeCreate
  初始化vue實體，這時候實體尚未建立，裡面的屬性自然也不能取用。
• created
  實體創建完成，你所建立的屬性(data、methods等)也成功綁定到該實體上，可以讀取data內的值，但DOM元素尚未生成，且$el元素也還不存在。
• beforeMount
  在創建的vue實體被掛載之前的階段，此時$el元素尚未存在
• mounted
  建立$el，並掛載創建的vue實體，產出真正的頁面，DOM元素也已經產生，可以做各種元素的操作，一般來說很常在這個階段或是created階段發出API請求。
• beforeUpdate
  在頁面元素被更新前觸發的階段，數據已經更新、但頁面還沒有渲染。
• updated
  數據更新且頁面也渲染了更新後的結果。
• beforeDestroy
  Vue實體要被銷毀前的階段，可以在這個階段做一些最後詢問之類的功能。
• destroyed
  銷毀產出的vue實體。
• activated
  若你的HTML標籤內有設定keep-alive，就會觸發這個階段的函數，並跳過之前的destroy階段。
• deActivated
  停用keep-alive時會觸發的階段。

如何在vue實體中呼叫各種hook

就像你寫在vue實體中的各個屬性一樣，hook也可以用相同的寫法。 我們一樣看一下簡單的範例，這邊我就只用beforeCreate、created、beforeMount、mounted 、 beforeUpdate & update來說明!

<template>
  <div id="app">
    <h1>{{message}}</h1>
     <label for="message">請輸入訊息</label>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to Vue!'
    };
  },
  methods: {
    doSomething() {
      alert('Hello!');
    }
  },
  beforeCreate(){
    console.log('beforeCreate called')
  },
  created() {
    console.log('created called')
  },
  beforeMount() {
    console.log('beforeMount called')
  },
  mounted() {
    console.log('mounted called')
  },
  beforeUpdate() {
    console.log('beforeUpdate called')
  },
  updated() {
    console.log('update called')
  }
};
</script>

點開範例後，請打開你的console，你應該會在右手邊的console看到以下的畫面

你可以注意到，四個hook如我們所預期的呼叫了! 接著麻煩你隨便在輸入框中更改內容，我們應該要見到另外兩個hook被觸發

beforeUpdate called
updated called

經過這樣簡單的操作你應該對於vue實體的生命週期有了基本的概念，接著你可以在各個hook試著去操作vue實體中的屬性，你會更明白每個階段可以做些什麼! 範例放在這邊交給各位去玩囉:D

結語

今天我們介紹了vue相當重要的概念，vue生命週期，了解在每個階段能執行的操作相當的重要，你才不會發生一些很奇妙的bug! 初次接觸時你會覺得有看沒有懂，不過實際去玩過範例之後我想會多少清楚一些，不用太急躁，我們後來還會繼續使用這些hook，慢慢熟悉即可! 我們明天見!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D

參考文章

搞懂生命週期

「Vue.js 學習筆記 Day14