在 Vue 中，生命周期定義了組件從創建到銷毀的整個過程。在生命周期的不同階段，Vue會自動調用一系列的鉤子函數，用戶可以在這些鉤子函數中添加自己的代碼，實現特定的功能。
Vue2生命周期
- beforeCreate：在實例初始化之后、數據觀測和事件配置之前被調用。
- created：在實例創建完成后被立即調用。在這一步，實例已完成數據觀測、屬性和方法的運算，watch/event事件回調已設置，但是掛載階段尚未開始。
- beforeMount：在掛載開始之前被調用，相關的render函數首次被調用。
- mounted：在el被新創建的vm.$el替換，并掛載到實例上去之后調用該鉤子。
- beforeUpdate：數據更新時調用，發生在虛擬DOM打補丁之前。
- updated：由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用這個鉤子。
- beforeDestroy：在實例銷毀之前調用。在這一步，實例仍然完全可用。
- destroyed：在實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
Vue3生命周期
- setup：這是一個新的生命周期鉤子，在組件創建之前執行，用于定義組件的響應式數據和函數。
- onBeforeMount：對應Vue2的beforeMount鉤子。
- onMounted：對應Vue2的mounted鉤子。
- onBeforeUpdate：對應Vue2的beforeUpdate鉤子。
- onUpdated：對應Vue2的updated鉤子。
- onBeforeUnmount：對應Vue2的beforeDestroy鉤子。
- onUnmounted：對應Vue2的destroyed鉤子。
- onErrorCaptured：這是一個新的生命周期鉤子，用于捕獲來自子孫組件的錯誤。
生命周期對比（Vue2 vs Vue3）
| Vue2生命周期 | Vue3生命周期 | 說明 |
|---|---|---|
| beforeCreate | setup | 組件創建之前執行，用于定義組件的響應式數據和函數 |
| created | setup | 組件創建完成后執行，用于定義組件的響應式數據和函數 |
| beforeMount | onBeforeMount | 組件掛載之前執行，相關的render函數首次被調用 |
| mounted | onMounted | 組件掛載完成后執行，el被新創建的vm.$el替換，并掛載到實例上去之后調用該鉤子 |
| beforeUpdate | onBeforeUpdate | 組件數據更新時執行，發生在虛擬DOM打補丁之前 |
| updated | onUpdated | 組件數據更新后執行，由于數據更改導致的虛擬DOM重新渲染和打補丁之后調用該鉤子 |
| beforeDestroy | onBeforeUnmount | 組件銷毀之前執行，實例仍然完全可用 |
| destroyed | onUnmounted | 組件銷毀后執行，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀 |
| - | onErrorCaptured | 組件錯誤捕獲，用于捕獲來自子孫組件的錯誤 |
