今天的內容將探討 Vue 元件的一生

Vue 的實體物件從開始創建、初始化資料、DOM 元素掛載、資料渲染與更新、卸載等過程，稱作生命週期。

Hooks function 是什麼？

在生命週期的階段中，做出相對應處理的 callback function，就可以稱作是生命週期的 Hooks function 。

生命週期

大致可以分為以下三個階段：

1. Vue 實體的建立

在此階段中會依序經歷以下 Hooks function

• beforeCreate
  Vue 實體剛被創建，但尚未初始化資料，所以此時還無法取得 data、computed、watch、methods 等屬性。
• created
  Vue 實體已初始化資料的屬性與狀態。
• beforeMount
  Vue 實體已取得 .vue 檔案內的 <template>模板內容並進行編譯。
• mounted
  元件已掛載到 DOM。

2. Vue 實體的更新

透過 Hooks function - beforeUpdate 、 updated 檢視實體狀態是否有更新，並且根據模板更新觸發執行。

• beforeUpdate
  在資料更新時，DOM 尚未重新渲染。
• updated
  DOM 已重新渲染。

3. Vue 實體的銷毀

首先會觸發 Hooks function - beforeUnmount，卸載實體的各種狀態、事件、子元件，之後觸發 Hooks function - unmounted 便無法再對此實體做任何操作。

• beforeUnmount
  實體尚未銷毀仍可正常使用。
• unmounted
  實體已銷毀。

參考資源

https://book.vue.tw/CH1/1-7-lifecycle.html
https://zh-hk.vuejs.org/guide/essentials/lifecycle.html
https://medium.com/pierceshih/vue-js-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-day14-vue%E7%94%9F%E5%91%BD%E9%80%B1%E6%9C%9F-65bc934dfd47