在 Vue 3 中,實例生命周期的鉤子函數被整合為了兩個主要的階段:Composition API 階段和 Options API 階段。下面是 Vue 3 中的所有生命周期鉤子函數:
Composition API 階段:
setup? //在組件實例創建之前執行,用于設置組件的初始狀態和行為。它是 Composition API 的入口點。
Options API 階段:
beforeCreate //在實例被創建之前執行,此時數據和事件還未初始化。created //實例已經創建完成,數據和事件已初始化,但尚未掛載到 DOM。beforeMount //在 DOM 掛載之前被調用。mounted //DOM 掛載完成后調用,此時組件已經顯示在頁面上。beforeUpdate //在數據更新之前調用,發生在虛擬 DOM 重新渲染和打補丁之前。updated //數據更新完成后調用,組件的數據和 DOM 都已更新。beforeUnmount //在實例銷毀之前調用,此時組件還存在。unmounted //實例被銷毀后調用,組件已被移出 DOM。errorCaptured //捕獲到子孫組件拋出的錯誤時調用。
每個鉤子函數都有其特定的用途,你可以在相應的階段執行一些邏輯,從而實現不同的功能。Composition API 階段的 setup
鉤子與 Options API 階段的其他鉤子是分離的,但你可以在 setup
鉤子中訪問 Options API 階段的數據和方法。
需要注意的是,在 Vue 3 中,被認為是「已棄用」或「不推薦使用」的生命周期鉤子函數有:beforeDestroy
(使用 beforeUnmount
替代)、destroyed
(使用 unmounted
替代)和 activated
、deactivated
。你應該盡量遵循官方文檔的建議來使用適當的生命周期鉤子函數。