🤍 前端開發工程師、技術日更博主、已過CET6
🍨 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1
🕠 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》
🍚 藍橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發企業級健康管理項目》、《帶你從入門到實戰全面掌握 uni-app》

在 Vue3 中，生命周期鉤子函數的用法有所變化，以適應 Composition API 的新特性。生命周期鉤子現在作為 on 前綴的函數提供，例如 onMounted、onUpdated 等。

生命周期鉤子

以下是 Vue3 中可用的主要生命周期鉤子及其對應的 Composition API 函數：

• 創建階段

  • beforeCreate -> 使用 setup() 替代
  • created -> 使用 setup() 替代

• 掛載階段

  • beforeMount -> onBeforeMount
  • mounted -> onMounted

• 更新階段

  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated

• 卸載階段

  • beforeUnmount (Vue3 中替代了 beforeDestroy)
  • unmounted (Vue3 中替代了 destroyed)

• 錯誤處理

  • errorCaptured -> onErrorCaptured

生命周期鉤子的使用示例

<template>
<div>{{ message }}</div>
</template><script>
import { ref, onMounted, onUpdated, onBeforeUnmount } from 'vue';export default {
setup() {
const message = ref('Hello, Vue3!');// 組件掛載后執行
onMounted(() => {
console.log('Component is mounted!');
});// 組件更新后執行
onUpdated(() => {
console.log('Component is updated!');
});// 組件卸載前執行
onBeforeUnmount(() => {
console.log('Component is about to be unmounted!');
});return { message };
}
};
</script>

在 Vue3 中，生命周期鉤子函數通常在 setup 函數內部調用，并且不需要像 Vue2 那樣在選項對象中注冊。這些鉤子函數提供了一種在組件的不同階段執行代碼的方式，例如初始化數據、設置訂閱、清理資源等。

注意，setup 函數本身在組件實例化時立即執行，相當于 Vue2 中的 beforeCreate 和 created 鉤子的結合。因此，在 setup 函數中進行的操作通常對應于這兩個生命周期階段。