「Vue.js 學習筆記 Day14」- Vue生命週期
程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！
不知不覺 Vue.js 筆記文章也來到了第 14 篇，雖然中間有點小拖延，但始終相信一步一腳印的扎實，仍為自己帶來不一樣的收穫。
這篇文章我們將介紹 Vue生命週期 ，這也是我還在搜索的主題和知識，因此，希望透過文字撰寫讓自己更加理解 Vue生命週期，若有錯誤的地方，也歡迎大家隨時跟我分享。
Let’s go～
Vue生命週期簡介
還記得我們在上一篇文章中提到的 Vue實例 嗎，除了上回介紹到的 methods 、computed和 watch ，其實 Vue實例 擁有一個完整的生命週期 Life Cycle。
過程中會執行一連串的工作，也就是從開始「創建」、「初始化數據」、「Template 編譯模板」、「DOM 元素掛載」、「資料的渲染與更新」和「卸載」等過程，我們統稱為 Vue實例的生命週期。
前面快速簡介 Vue實例 的生命週期，接著我們詳細來說明過程中的內容。
實體生命週期
讓我們分成 4+1 個階段（每個階段又有兩種情況）來分享，我們先著重在 4 的部分，最後再來補充 1 的內容。
下面三張圖，圖示當中的紅色框框內容，就是生命週期的函式，常以
Hook鉤子稱之，其餘則是在生命週期當中會發生的事件。
第一階段：Creation 初始建置
Creation 階段是組件中運行的第一個 Hook 函式，與其他階段不同，它是在伺服器端渲染期間運行。
因此，若需要在客戶端渲染和伺服器渲染期間於元件當中設置事件，須於此階段進行設定。
- beforeCreate：
Vue實例初始化。 - created：
Vue實例建立完成。資料$data已可取得，但$el屬性尚未被建立。
第二階段：Mounting 資料掛載
接續上一個 Creation 階段，首先他會先判斷是否有無 $el 屬性，若沒有則會嘗試另一種掛載方式（使用$mount掛載el）。
再來會判斷是否有 $template 屬性 ，若有則直接使用 render function ，反之則使用 $el teamplate 進行模板編譯。
接著，請先將目光放在下圖左手邊的內容（beforeMount & mounted）。
3. beforeMount：執行元素掛載之前，代表 $el 尚未被建立。
4. mounted：元素已掛載， $el 被建立，是最常使用的生命週期 hook 。
補充：若要操作 AJAX，須於
created Hook階段後才能使用，但通常到mounted Hook階段，也就是現在才會被使用，屆時，也代表資料已掛載成功。
休息一下，喝杯水再上 :D
第三階段：Updating 資料改變，重新渲染畫面
當元件的資料屬性發生變動，或其他因素導致畫面需要重新渲染時，則會調用 Updating 刷新網頁內容。
接著，請先將目光放在下圖右手邊的內容（beforeUpdate & updated）。
5. beforeUpdate：當資料改變被呼叫使用，還不會渲染 View。
6. updated：當資料更新完成，則驅動 DOM 元素重新渲染畫面 View。
第四階段：Destruction 元件銷毀
當呼叫 destroy 函式時，則會執行銷毀的動作，將原始的元件從 DOM 元素中移除。
7. beforeDestroy：Vue實例還可使用。
8. destroyed：Vue實例銷毀，所有的DOM 元素綁定被解除、移除偵聽事件、Vue child 實例也被一併銷毀。
第 4+ 1 階段：activating 保存資料，不銷毀
上面 4 個階段是我們常見的生命週期，那還有 1 個階段則是 activated Hook 和 deactivated Hook ，那它可以用來取代 Destruction 銷毀。
究竟是要如何取代呢？
・若是在 HTML 有使用 keep-alive 標籤，其特性是可以維持資料狀態，只會有 activated Hook 與 deactivated Hook 的情況產生，則不觸發 destroyed Hook 。
・反之，若在 HTML 沒有使用 keep-alive 標籤，則會觸發 destroyed Hook 銷毀資料。
小案例分享 （沒有使用 keep-alive 標籤）
Demo Link ：若是在將資料隱藏的案例中，點擊「隱藏」按鈕後，資料會全部清空，並在下次需要時，重新跑一次資料前面三個階段的生命週期，包含 Creation 階段、Mounting 階段、Updating 階段。
結語
對我來說，第一次看到 Vue生命週期 時，真的是滿頭問號QQ，但透過本篇文章撰寫過程，好像越來越瞭解當中所發生的事物以及什麼時候會執行哪些 Hook 。
藉此幫助我對於 Vue.js 有更進一步的認知，而下一篇將接著介紹 「Vue 元件」觀念，雖然我自己也還在摸索中，但一樣會從寫作中持續學習的，敬請期待。
謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D
