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

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

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

Vue 生命週期

Lifecycle-Diagram（圖片來源: Vue.js）

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

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

data: function(){
  return {...}
},
beforeCreate(){
  console.log('beforeCreate! ${this.text}');
},
created(){
  alert('created! ${this.text}');
},
beforeMount(){
  alert('beforeMount! ${this.text}');
},

注意

不要在選項屬性上使用箭頭函數！
不要在選項屬性上使用箭頭函數！
不要在選項屬性上使用箭頭函數！

例如：

created：() => console.log(this.a)

或

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

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

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。

beforeDestroy 與 destroyed

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

deactivated 與 activated

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

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

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

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

beforeCreate
init
Created

問題 2： keep-alive 標籤內的元件描述，以下何者為對？

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