本文同步發表於斜槓女紙部落格：Day13 萬丈高樓平地起(1)：Vue 的生命週期

生活的道路一旦選定了，就要勇敢的走下去。是的，一旦報名鐵人賽，就要認真的寫下去。
....鐵人賽的小格言好勵志

為了能順利湊完30天的文章，今天要來跟大家拉賽一下觀念篇：Vue 的生命週期

每個 Vue 實體被創建之前，會經過一系列初始化的過程，包含在原始資料加料、建立Vue Instance、編譯樣板、綁定資料等，隨著資料新增修改，週而復始直到刪除，執行的同時會呼叫這些生命週期的虎克船長掛鉤(hook)，我們可以在這些掛鉤上做額外的處理。

雖然一開始開發時若不了解 Vue 的生命週期 對開發的結果影響不大，像我coding到目前為止也沒感覺有什麼差異。但如果觀念正確的話，對未來近接使用也體有幫助的唷！

看著圖表來輔助一下，官方介紹圖第一次看的話應該會跟我一樣一頭霧水，所以我光明正大偷拿重製老師的範例圖給大家看看

• beforeCreate：實體初始化。
• Created：實體建立完成。資料 $data 已可取得，但 $el 屬性還未被建立。
• beforeMount：執行元素掛載之前。
• mounted：元素已掛載， $el 被建立。
• beforeUpdate：當資料變化時被呼叫，還不會描繪 View。
• updated：DOM 的更新已經完成，View 被顯示在畫面上。
• activated：如果有設定 keep-alive，這個掛鉤會被呼叫。
• deactivated：停用 keep-alive時被呼叫。
• beforeDestroy：實體還可使用。
• destroyed：實體銷毀。所有綁定被解除、事件偵聽被移除、子實體也被銷毀。

註：它們的資料型態全都是 Function。

實際範例

Vuejs建立之前會先進入beforeCreate階段，可以看到console中跳出訊息

接下來一路進展到activated階段，此時若我們修改/新增input的文字內容，也可以在console中看到即時出現的訊息。

若有需要保留資訊在生命週期內，不被刪除資料的話，可使用keep-alive保留該元件的狀態。

created VS mounted

到這兒我衍伸了一個疑問，看了很多大神的程式碼發現，有些人在created呼叫API，而有些則是在mounted呼叫，在這兩者中呼叫會有什麼差異嗎？

詢問了老師以後以後得到的答案如下：

這邊稍稍整理一下我所理解的部分

• created 狀態，可以先取得資料，但此時還沒綁定 DOM 元素，所以能在之後的 mounted 狀態綁定並渲染
• 在 mounted 狀態取得資料，當資料回傳回來時 data 取得資料，會觸發 beforeUpdate 更新內容並重新渲染畫面
• mounted 通常是在一些插件的使用或者組件的使用中進行操作，比如插件 chart.js 的使用
• created在渲染頁面之前使用，通常是用來渲染頁面。mounted通常是在渲染頁面之後，用來操作dom節點
• 通常情況下使用created比較多，使用mounted相對少一些，一些情況使用mounted可能會報錯。

開始反想該不會我的ajax放錯位置了？默默地將mounted改成created，持續嚐試第2組API串接中，如果成功後再來跟大家分享結果，今天就先到這兒囉~

參考資料

• Vue.js (8) - Vue 實體與生命週期
• 圖解 Vue 的生命週期
• 「Vue.js 學習筆記 Day14」- Vue生命週期
• Vue.js Core 30天屠龍記(第4天): Vue 實體的生命週期
• Vue 21 Vue.js 的生命週期 - 從出生到死亡以及長生不老的方法
• Vue生命週期中created()和mounted()的區別