Skip to main content

👩‍💻 Lifecycle Hooks

生命週期 Hooks(Lifecycle Hooks)

在 Composition API 中,我們可以使用 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount 等生命週期鉤子,來執行組件生命週期中的操作

這些鉤子允許我們在不同階段的生命週期中添加自定義邏輯

常見的 Lifecycle Hooks

  • onBeforeMount:在組件即將被掛載到 DOM 前執行
  • onMounted:在組件被掛載到 DOM 後執行
  • onBeforeUpdate:在組件即將更新前執行
  • onUpdated:在組件更新完成後執行
  • onBeforeUnmount:在組件即將被卸載前執行

這些生命週期鉤子可以通過 import 的方式引入,然後在組件中使用

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount } from 'vue';

export default {
setup() {
onBeforeMount(() => {
// 在組件即將被掛載到 DOM 前執行的邏輯
});

onMounted(() => {
// 在組件被掛載到 DOM 後執行的邏輯
});

onBeforeUpdate(() => {
// 在組件即將更新前執行的邏輯
});

onUpdated(() => {
// 在組件更新完成後執行的邏輯
});

onBeforeUnmount(() => {
// 在組件即將被卸載前執行的邏輯
});

// 其他 Composition API 邏輯

return {};
},
};