本節內容包含下述子章節:
- Vue 生命週期
- 練習測驗 2:生命週期章節小測驗
Vue 生命週期
每個 Vue instance 在被創建時都要經過一系列的初始化過程,在這個過程中 Vue 也會運行 lifecycle hooks 的函數,提供使用者在不同階段添加自己的操作。
上圖中,紅色圓角框的文字,都屬於 Vue 所提供的 lifecycle hooks,呼叫方式如下:
1 |
|
不要在選項屬性上使用箭頭函數!
不要在選項屬性上使用箭頭函數!
例如:
1 |
|
因為箭頭函數並沒有 this , this 會作為變數一直向上找尋,直到找到,因此經常導致
1 |
|
之類的錯誤。
各階段介紹
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 的生命週期。