iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 10
0
Modern Web

30天手把手的vue.js教學!系列 第 10

2020it邦鐵人賽-30天手把手的Vue.js教學 Day10- 認識Vue Lifecycle

tags: Vue.js ItIron2020

前言

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

認識vue lifecycle hooks

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

vue lifecycle

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

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

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

  • activated
  • deActivated

為什麼我需要認識hooks?

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

那每個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看到以下的畫面

demo

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

beforeUpdate called
updated called

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

結語

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

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

參考文章

搞懂生命週期

「Vue.js 學習筆記 Day14


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day9 - 認識watch屬性
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day11 - 認識Vue Components
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言