在 Vue 3 中，生命周期鉤子函數是指組件從創建到銷毀的整個過程中，Vue 自動調用的一些特定函數。它們讓你能夠在組件的不同階段執行一些自定義操作。Vue 3 提供了組合式 API 和選項式 API 兩種方式來定義生命周期鉤子。

1.?onBeforeMount?(組合式 API)

• 作用：在組件掛載之前調用（即 DOM 渲染之前）。
• 用法：用于執行組件掛載前的準備工作。

import { onBeforeMount } from 'vue';onBeforeMount(() => {console.log('組件即將掛載');
});

2.?onMounted?(組合式 API)

• 作用：組件掛載完成后調用（即 DOM 渲染完成后）。
• 用法：可以用來執行依賴 DOM 的操作，例如獲取 DOM 元素或初始化第三方庫。

import { onMounted } from 'vue';onMounted(() => {console.log('組件掛載完成');
});

3.?onBeforeUpdate?(組合式 API)

• 作用：在組件的響應式數據發生變化并重新渲染之前調用。
• 用法：用于訪問數據變化前的狀態，可以進行一些數據預處理。

import { onBeforeUpdate } from 'vue';onBeforeUpdate(() => {console.log('組件數據更新前');
});

4.?onUpdated?(組合式 API)

• 作用：在組件重新渲染后調用。
• 用法：當組件的響應式數據更新并且 DOM 被重新渲染后，可以執行一些 DOM 操作或更新。

import { onUpdated } from 'vue';onUpdated(() => {console.log('組件更新完成');
});

5.?onBeforeUnmount?(組合式 API)

• 作用：在組件銷毀之前調用。
• 用法：適用于清理操作，如移除事件監聽器、取消定時器等。

import { onBeforeUnmount } from 'vue';onBeforeUnmount(() => {console.log('組件銷毀前');
});

6.?onUnmounted?(組合式 API)

• 作用：組件銷毀后調用。
• 用法：可以在組件銷毀后進行清理工作，例如清理全局事件、取消異步請求等。

import { onUnmounted } from 'vue';onUnmounted(() => {console.log('組件銷毀后');
});

7.?onErrorCaptured?(組合式 API)

• 作用：捕獲子組件中的錯誤并執行一些操作。
• 用法：用于全局錯誤處理。

import { onErrorCaptured } from 'vue';onErrorCaptured((err, instance, info) => {console.error('捕獲到錯誤：', err);return false; // 繼續傳遞錯誤
});

Vue 3 生命周期鉤子函數（選項式 API）

除了組合式 API，Vue 3 也保留了選項式 API 中的生命周期鉤子。它們的名稱和 Vue 2 中類似，如下所示：

• beforeCreate：組件實例創建之前。
• created：組件實例創建完成后。
• beforeMount：模板掛載之前。
• mounted：模板掛載完成后。
• beforeUpdate：數據發生變化之前。
• updated：數據發生變化之后。
• beforeDestroy：組件銷毀之前。
• destroyed：組件銷毀之后。

小結

Vue 3 的生命周期鉤子函數允許你在組件的不同階段進行自定義操作，從創建到銷毀，每個階段都有其特定的鉤子。通過合理使用這些鉤子函數，你可以更靈活地管理組件的狀態和行為。