五分鐘就看懂 Vue 生命週期！
之前在課程的作業中都會一直碰到生命週期，但都是以比較簡單的 created() 使用為主，後來在做 Twitter 專案時，才真的會運用到比較多種不同的生命週期，以下先簡單定義一下每個時期的內容，我都會以 Vue2 的名詞解釋，同時將 Vue3 更新後的名字也放出來：
Creation Hooks
主要定義是 Initialization 階段，這時候不能操作 DOM 節點，因為此時它還沒被掛載到 Vue 實例上。
- beforeCreate（Vue 3 → setup）： Vue 實體被初始化後調用，但 data observer 和 event/watcher 事件配置尚未被建立
- created（Vue 3 → setup）： Vue 實體已建立，狀態與事件已初始化完成(prop、data、computed 等屬性已建立，但 vm.$el 屬性無法使用 )
通常要 Fetch API 時我會在這邊先處理。
Mounting Hooks
是最常用到的時期，且是操作 DOM 的好時機，但如果是要抓取資料來渲染畫面的話，建議不要在此階段，而是在 created 階段。
- beforeMount（Vue 3 → onBeforeMount）： 發生在第一次渲染前，但此時vm.$el 屬性還是無法使用 （This hook is not called during server-side rendering.）
- mounted（Vue 3 → onMounted）： 發生在第一次渲染後，
el會被vm.$el替換，也就是說此時網頁上的 DOM 節點、監聽事件都被綁定至 Vue 的實體。
但要注意的是，注意mounted不會保證所有子組件也都被一起掛載。若希望等到整個view 頁面全部渲染完畢，可以在mounted内部使用 vm.$nextTick。
Updating Hooks
這塊我就真的比較少用到，主要是在 Component 重新渲染時會觸發，通常可以用在 debugging 或是 profiling，而文件上也有特別提到，如果是要監測data 或是 prop 的話建議用 computed 或是 watcher，這也是為什麼我比較少用Updating 的原因。
- beforeUpdate（Vue 3 → onBeforeUpdate）： 發生在改變 data 值後、準備更新 DOM 重新渲染畫面前。
例如：可以使用移除已添加的事件監聽器。 - updated（Vue 3 → onUpdated）： 發生在改變 data 後、DOM 已重新渲染畫面後，此時可以執行 DOM 操作，但建議若要更改狀態需透過 watch / computed ，不建議在此 hook 中。
與 mounted類似，updated不會保證所有子組件也都被一起掛載。若希望等到整個view 頁面重新渲染完畢，可以使用 vm.$nextTick。
Destruction Hooks
這部分就比較直覺了，當你的頁面要被消滅時，你想要什麼操作，在專案中，我通常會在這時候解除 Event listener 或是在 socket.io 聊天室操作的時候，傳送給後端事件說當前使用者已離開房間。
- beforeDestroy（Vue 3 → onBeforeUnmount）： 發生在實體被銷毀前，畫面完整且實例都可以操作，此時可以清除監聽器或是一些訂閱事件。
- destroyed（Vue 3 → onUnmounted）： 在此時，所有的監聽器、子元件、watchers 都會被銷毀，無法再對此實例操作了。
最後，不免俗的還是放張鼎鼎大名的生命週期圖同時附上我覺得很好的參考網站資源，那麼此次分享就到這囉！
參考資料：
1. 英文：Understanding Vue.js Lifecycle Hooks
2. 中文：元件的生命週期與更新機制
3. 英文：A Complete Guide to Vue Lifecycle Hooks – with Vue 3 Updates
（可以了解 Vue2 和 Vue 3 的差異）
4. 官方文件
