DAY 4 - 建立到銷毀：深入了解 Vue 生命週期

今日前言

今天來談談Vue.js的生命周期，了解元件建立到摧毀過程，深入了解元件運作原理及我們可以如何運用生命周期，了原理和觀念，在正確的地方運用生命週期，讓你的開發上更順利。

閱讀此篇也推薦可以搭配 kuro 老師的文章(生命周期更新機制) 及 Vue官方文件 你會對Vue的生命周期有更深一層的了解

Vue.js 生命周期是什麼 ?

于其說是Vue的生命周期，更精準地可以說是元件的生命周期
元件初始化 > 建立元件 > 更新元件 > 卸載元件 > 銷毀元件

這一串的過程就是指他的生命周期， 主要會有三個階段 : 建立階段、更新階段、銷毀階段

每個階段實際在做什麼呢 ?

來看看官方文件裡的生命周期，在這邊可以看到每個階段元件的生命周期，也可以清楚了解發生什麼事，下面會一一詳細解說

建立階段

• 建立前 - beforeCreate : 完成初始化
• 建立後 - Created：元件建立完成(未掛載DOM)，data、computed、watch、methods 可取得，但 $el 、$ref 屬性還未被建立。
• 掛載前 - beforeMount：元件掛載之前，這時候有了el，將虛擬Dom轉入實體Dom。
• 掛載後 - mounted：元件掛載成功， $el 、template 被建立，完成Dom及渲染畫面，此時可以對畫面進行操作。

created 和 mounted ?
為什麼要在 mounted 階段建立 app 而不是在 created階段呢 ?
差異在於created 階段還沒把虛擬的Dom元素載入上去實際Dom($el、$ref 為空)，雖然可以使用data、computed、watch，但是需要等候 Dom 建立，雖然使用起來沒有差異，但實際上背後運作原理有差異

總結:
created：使用于初始化某些數值，例如 將 data 中的數值渲染成畫面。
mounted：使用于初始化建立完畢，會對Dom元素進行操作，一般來說會在這掛載app。
在 created 中無法進行 Dom 操作，而 mounted 可以操作渲染所有畫面及屬性。

更新階段

• 更新前 - beforeUpdate : 變動資料後，在更新之前訪問元件
• 更新後 - updated : 資料更新完畢，顯示 View 到畫面並同步更新

這一段就是很單純查看你變更資料，同步變更至畫面。

銷毀階段

• 銷毀前 - beforeDestroy：銷毀前，此時元件還可使用。
• 銷毀後 - destroyed： 所有相關事件及綁定、偵聽都會解除，所有元件都被銷毀。