Vue 初心者筆記 #15 紀錄一下 Vue 生命週期的應用

在講到下個章節之前,這邊要先簡單說明 Vue 的生命週期,瞭解 Vue 的生命週期對於熟悉 Vue.js 會有很大的幫助。

Vue 的生命週期

各種鉤子 (Hook)

當生命週期到某個時間點,就會觸發某個 Hook,以下先依序介紹這些時間點:

beforeCreate

Vue 已經開始運行,但是資料還沒準備完成,資料還沒有辦法掛載上去。

created

資料已經準備完成!如果要做 AJAX、Axios 或者其他資料操作,至少要在這個階段之後才能做。

beforeMount

準備開始繪製 Vue 的一些元件。

mounted

DOM 元素已經掛載到 Vue 實體上囉,但還沒被渲染出來,這時候可以做一些與 DOM 有關的操作了。

beforeUpdate

當有資料變動時,會觸發 beforeUpdate 事件,等到畫面繪製完成後,才接著觸發 updated 事件。

updated

操作資料狀態、更新資料時,都會觸發 updated,像是修改文字,或是用 jQuery 操作 HTML 的 DOM 元素之類的。

beforeDestroy

資料狀態還存在,準備要移除。

destroyed

資料同步被移除。如果再次呼叫元件,元件會重建,即資料會被釋放掉。

這邊假設還沒加上 <keep-alive>,所以沒有 activateddeactivated 的 Hook。

加上 Keep-Alive 讓元件資料狀態不被移除

有時候我們不希望資料重建,像是在做切換頁籤的動作時,我們會希望維持資料狀態,不要觸發 destroyed 這個 Hook,這時可以使用 <keep-alive> 標籤將元件包起來。

使用 <keep-alive> 標籤包起來的元件,在移除時就不會觸發 destroyed 事件了,而且下次呼叫回來時,資料狀態也不會改變。

activated

當我們再次呼叫元件,會發現前面的 created 都沒觸發,而是直接跳到 activated 這個 Hook 裡面,而且資料狀態都有保留。

deactivated

這個 Hook 階段代表我們已經完成再次呼叫資料的動作了,這次的資料狀態是保留的。
這時候就不會出現 beforeDestroydestroyed,因為那兩個 Hook 是當元件沒加上 <keep-alive> 時,將元件完全釋放,才會觸發的 Hook。
只要有加上 <keep-alive> 就會改為觸發 deactivated

做個小整理

  1. 通常最常使用的是 createdmounted
  2. 如果要使用 AJAX 等方法,至少要到 created 之後才能用
  3. 想要維持資料狀態的話,可以使用 <keep-alive> 標籤

最後,官方也有一張 Lifecycle Diagram 的示意圖,也可以參考看看 :D

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。