今天的部分先來談談Vue的生命週期和元件特性。

• 生命週期

建立Vue的實體時，從建立、掛載、更新、銷毀移除，這個過程稱作生命週期。

• Hooks function

到生命週期這階段時，Vue提供可做相對應處理的callback function，而這些callback function稱之為Hooks function。

• 創建階段

Hooks名稱(Vue 3.0 Composition API)：setup( )
Hooks名稱(Vue 2.x/3.x)：beforeCreate
Vue實體被建立，狀態與事件都尚未初始化。

Hooks名稱(Vue 3.0 Composition API)：setup( )
Hooks名稱(Vue 2.x/3.x)：created
Vue實體已建立，狀態與事件已初始化完成。

• 掛載階段

Hooks名稱(Vue 3.0 Composition API)：onBeforeMonut
Hooks名稱(Vue 2.x/3.x)：beforeMount
Vue實體尚未與模板(DOM 節點)綁定

Hooks名稱(Vue 3.0 Composition API)：onMounted
Hooks名稱(Vue 2.x/3.x)：mounted
Vue實體與掛載完成，el的目標DOM被$el所替換。

• 更新階段

Hooks名稱(Vue 3.0 Composition API)：onBeforeUpdate：
Hooks名稱(Vue 2.x/3.x)：beforeUpdate
當狀態更動且畫面同步更新前時，可在更新前去訪問現有的DOM，例如移除、添加事件監聽器。

Hooks名稱(Vue 3.0 Composition API)：onUpdated：
Hooks名稱(Vue 2.x/3.x)：updated
可完成虛擬DOM的重新渲染與新增補丁，且組件DOM也已完成更新，能夠執行並依賴DOM的操作。要注意的是，請勿在此函數中操作數據，不然會可能會陷入死循環。

• 破壞階段

Hooks名稱(Vue 3.0 Composition API)：onBeforeUnmount
Hooks名稱(Vue 2.x)：beforeDestroy
Hooks名稱(Vue 3.x)：beforeUnmount
在執行 app.$destroy() 之前，可執行刪除提示(如：詢問使用者是否確認刪除？)，通常用於銷毀定時器，去解綁全局時間銷毀插件對象。

Hooks名稱(Vue 3.0 Composition API)：onUnmounted
Hooks名稱(Vue 2.x)：destroyed
Hooks名稱(Vue 3.x)：unmounted
在 Vue 的實體物件被銷毀完畢後調用。調用後，不只所有的事件監聽器均被移除，子實例也同樣的會被銷毀。此後便無法再進行任何操作。

Hooks名稱(Vue 3.0 Composition API)：onErrorCaptured
Hooks名稱(Vue 2.x/3.x)：errorCaptured
子代或孫代元件的錯誤被捕獲時將觸發。

以上為今天關於Vue的生命週期與元件特性的部分，謝謝各位觀看，並讓我們迎接美好的明天！