【Vue.js 學習筆記】05. Vue 的生命週期

本節內容包含下述子章節:

  1. Vue 生命週期
  2. 練習測驗 2:生命週期章節小測驗


Vue 生命週期

Imgur

Lifecycle-Diagram(圖片來源: Vue.js


每個 Vue instance 在被創建時都要經過一系列的初始化過程,在這個過程中 Vue 也會運行 lifecycle hooks 的函數,提供使用者在不同階段添加自己的操作。

上圖中,紅色圓角框的文字,都屬於 Vue 所提供的 lifecycle hooks,呼叫方式如下:

1
2
3
4
5
6
7
8
9
10
11
12
data: function(){
  return {...}
},
beforeCreate(){
  console.log('beforeCreate! ${this.text}');
},
created(){
  alert('created! ${this.text}');
},
beforeMount(){
  alert('beforeMount! ${this.text}');
},
注意
不要在選項屬性上使用箭頭函數
不要在選項屬性上使用箭頭函數
不要在選項屬性上使用箭頭函數


例如:

1
2
3
4
5
created() => console.log(this.a)



vm.$watch('a'newValue => this.myMethod())

因為箭頭函數並沒有 thisthis 會作為變數一直向上找尋,直到找到,因此經常導致

1
2
3
4
5
Uncaught TypeError: Cannot read property of undefined

或 

Uncaught TypeError: this.myMethod is not a function`

之類的錯誤。


各階段介紹

beforeCreate

剛完成初始化,此階段資料尚未產生,理論上此階段別進行操作資料,但也不是沒辦法啦 → vue怎么在beforeCreate里获取data。不過人家最後也說了…實際情況中從來沒遇到過需要在組件還沒初始化就去拿 data 的

created

數據觀測後所產生的 hook,從此階段開始才能對資料做操作。

beforeMount

編譯完模板後會被觸發,但此階段尚未將模板掛載到 HTML 的 DOM 元素上。

mounted

直到此階段才將 template 整個掛載到 HTML 上,這時候才能進行一些 HTML 的操作。假如有載入 jQuery,要到這步驟才能操作 HTML 的 DOM 元素。

beforeUpdate

在元件建立起來後,它會因為資料變動的關係而觸發 beforeUpdate 並進行重新繪製。

updated

直到資料重新繪製完成後,會再觸發 updated。

beforeDestroydestroyed

分別會在銷毀元件前後觸發。

deactivatedactivated

一般元件,如:v-if,不想每次切換條件判斷式就被 destroy 並摧毀該元件上所紀錄的資料,導致下次更改判斷式後就必須重新走一次 created 流程。

此時就可以使用 <keep-alive> 來維持資料狀態,避免被 destroy。當組件在 <keep-alive> 內被切換,它的 deactivated 和 activated 這兩個 lifecycle hooks 函數將會被對應執行。



練習測驗 2:生命週期章節小測驗

問題 1:生命週期中,如果我們要透過 Ajax 讀取資料,至少到哪個階段才能正確運作?

  1. beforeCreate
  2. init
  3. Created


問題 2: keep-alive 標籤內的元件描述,以下何者為對?

  1. v-if 判斷隱藏後,一樣會觸發 destroyed 的生命週期。
  2. 在 v-if 判斷隱藏後,資料也不會消失。
  3. 重複切換出現的時候,一樣會進入 create 的生命週期。



其他連結

  1. 【Vue.js 學習筆記】00. 目錄



參考資料

  1. 六角學院-Vue 出一個電商網站|Udemy
  2. The Vue Instance|Vue.js
  3. vue.js - vue怎么在beforeCreate里获取data|SegmentFault 思否