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 {};
  },
};