【Vue】Vue 的生命週期

🚩 前言

Vue 在做每一個動作的前後，
都可以使用 hook 的方式做需要做的事情，
例如： created 、 mounted 。

以下用一張圖片來呈現 Vue 的生命週期的各個 hook。

圖片來源：六角學院

🚩 hook

1. before Create
   在這個時候資料還沒匯入，所以還沒有 Data 可以使用
2. created
   已經可以對數據做操作
3. beforeMount
   此時還沒有將模板套上 HTML 的 DOM 元素
4. mounted
   將 x-template 掛載到 HTML 上， 假設有載入 jQuery，要到這個時候才可以操作 HTML 的 DOM 元素
5. beforeUpdate
   資料變動前的觸發
6. updated
   變動後的觸發
7. beforeDestroyed
   觀測、元件、事件移除前的觸發
8. destroyed
   移除後的觸發

🚩 其他細節

1. 如果要操作 AJAX 行為的話要等到到 created 之後，
   因為在那之前沒有資料可以處理。
2. 想要維持資料狀態可以使用 <keep-alive>
當元件被移除時不會呼叫 destroyed，
   所以在下次呼叫回來時資料狀態是不會有改變的。

如果有加 <keep-alive> 流程會是：

1. … 前面都一樣
2. mounted
3. activated
4. deactivated：消除元件時觸發的

activated、deactivated 這兩個 hook 是只有在 <keep-alive> 才會有的，
當元件要在啓用時，會直接觸發到 activated，會跳過前面那些 hook。

沒有加的流程會是：

1. … 前面都一樣
2. mounted
3. beforeDestroyed：消除元件時觸發的
4. destroyed