Vue 生命週期 (Lifecycle)

本文簡單介紹 Vue 的生命週期，瞭解 Vue 的生命週期對於熟悉 Vue.js 會有很大的幫助。

Lifecycle (Vue Hooks)

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

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

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

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

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

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

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

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

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

※ 這邊假設還沒加上 <keep-alive>，所以沒有 activated 與 deactivated 的 Hook。

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

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

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

這個 Hook 階段代表我們已經完成再次呼叫資料 (Activated) 的動作了，而且可以發現資料狀態確實是保留的。

這時候就不會出現 beforeDestroy 與 destroyed 這兩個 Hook，因為它們是當元件沒加上 <keep-alive> 時，將元件完全釋放，才會觸發的 Hook。
因此，只要有加上 <keep-alive> 就會改為觸發 deactivated。

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

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