目錄
一、Vue3組合式API中的生命周期函數。
（1）各階段生命周期涉及函數簡單介紹。
<1>創建掛載階段的生命周期函數。
<2>更新階段的生命周期函數。
<3>卸載階段的生命周期函數。
<4>錯誤處理的生命周期函數。
（2）Vue3生命周期API——選項式與組合式對比。
Vue2 選項式、Vue3 選項式/組合式的卸載階段生命周期API對比。
（3）以Vue3組合式?onMounted 生命周期函數代碼示例。
<1>beforeCreate與created。(setup)
<2>onMounted。
一、Vue3組合式API中的生命周期函數。
（1）各階段生命周期涉及函數簡單介紹。
- Vue3 中組合式 API 的生命周期函數，是在組件不同階段執行特定操作的回調函數。通過 “onXXX” 形式實現，在 setup() 內調用。
<1>創建掛載階段的生命周期函數。
- onBeforeMount：組件掛載到 DOM 前觸發。可初始化非響應式數據、設置全局狀態。
- onMounted：組件掛載到 DOM 后觸發。常用于 DOM 操作、獲取數據、啟動計時器等。
<2>更新階段的生命周期函數。
- onBeforeUpdate：響應式數據變化，組件更新前觸發。可用于比較數據變化、執行更新前邏輯。
- onUpdated：組件更新完成后觸發。可進行 DOM 操作、更新 UI。
<3>卸載階段的生命周期函數。
- onBeforeUnmount：組件卸載前觸發。適合做清理工作，如移除事件監聽器等。
- onUnmounted：組件卸載后觸發。用于執行最終清理，像銷毀定時器、釋放資源等。
<4>錯誤處理的生命周期函數。
- onErrorCaptured：捕獲子組件運行時錯誤。可處理錯誤、給出錯誤提示 。
（2）Vue3生命周期API——選項式與組合式對比。
選項式生命周期API 組合式生命周期API beforeCreate/created setup beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmount unmounted onUnmounted
- 注意：Vue3中是支持選項式API的。不過一般使用組合式API。邏輯方便復用、維護。
Vue2 選項式、Vue3 選項式/組合式的卸載階段生命周期API對比。
Vue2 選項式 API Vue3 選項式 API Vue3 組合式 API 作用場景 beforeDestroy beforeUnmount onBeforeUnmount 組件卸載前的清理工作 destroyed unmounted onUnmounted 組件卸載后的最終清理
（3）以Vue3組合式?onMounted 生命周期函數代碼示例。
<1>beforeCreate與created。(setup)
- 代碼示例。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"></div><script type="module">import { createApp, ref } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相關代碼一律放在setup中const getList = () => {//模擬發請求setTimeout(() => {console.log('發送請求，獲取數據List')}, 2000)}getList()return {}}}).mount('#app')</script> </body></html>
- 效果。
<2>onMounted。
- 代碼示例。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"></div><script type="module">import { createApp, ref, onMounted } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相關代碼一律放在setup中const getList = () => {//模擬發請求setTimeout(() => {console.log('發送請求，獲取數據List')}, 2000)}//一進入頁面的請求getList()//假設某些代碼需在mounted生命周期執行onMounted(() => {console.log('mounted生命周期函數')})return {}}}).mount('#app')</script> </body></html>
- 效果。
- 生命周期函數寫成函數的調用方式，可以多次進行調用。（可寫不同的邏輯，不會沖突且按照先后執行）
- 代碼示例。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"></div><script type="module">import { createApp, ref, onMounted } from './vue.esm-browser.js'createApp({setup() {//beforeCreate、created相關代碼一律放在setup中const getList = () => {//模擬發請求setTimeout(() => {console.log('發送請求，獲取數據List')}, 2000)}//一進入頁面的請求getList()//假設某些代碼需在mounted生命周期執行onMounted(() => {console.log('mounted生命周期函數，邏輯1')})//寫成函數的調用方式，可以調用多次。// 調用一次函數提供一個鉤子，不會沖突，按照先后進行執行onMounted(() => {console.log('mounted生命周期函數，邏輯2')})return {}}}).mount('#app')</script> </body></html>
- 效果。
)
