生命週期鉤子

在 Vue 3 中，生命週期鉤子（Lifecycle Hooks） 是指 Vue 實例在其創建和銷毀過程中的不同階段，可以執行的函數。這些鉤子允許開發者在特定的生命週期階段執行相應的代碼，比如在 Vue 實例被創建之前、渲染之後、銷毀之前等。

1. Vue 生命週期簡介

Vue 實例的生命週期是指從實例被創建、初始化數據、編譯模板、掛載到 DOM、更新數據並重新渲染，到最後卸載的過程。這些生命週期階段對應一系列的鉤子函數，我們可以在這些時刻執行自定義邏輯。

Vue 3 中主要的生命週期鉤子如下：

• 創建階段
  • beforeCreate
  • created
• 掛載階段
  • beforeMount
  • mounted
• 更新階段
  • beforeUpdate
  • updated
• 銷毀階段
  • beforeUnmount
  • unmounted

---

2. 生命週期鉤子的詳細解釋

1. 創建階段

• beforeCreate
  • 在 Vue 實例初始化之初，還沒有初始化 data 和 methods，這時可以進行一些初始化設置。
• created
  • 在 Vue 實例已經創建完成，並且 data、methods 已經初始化完畢，但尚未掛載到 DOM。這個階段常用於初始化數據或請求資料。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Vue 實例正在創建');
  },
  created() {
    console.log('created: Vue 實例已創建，數據是:', this.message);
  }
});

app.mount('#app');

2. 掛載階段

• beforeMount
  • 在模板渲染和掛載到 DOM 之前調用。在這個階段，虛擬 DOM 已經完成了編譯，但還沒有應用到實際的 DOM 元素上。
• mounted
  • 在模板掛載到 DOM 之後觸發，此時可以訪問真實的 DOM 元素。這個鉤子經常用於操作 DOM 元素，比如查詢 DOM 節點或第三方庫的初始化。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  mounted() {
    console.log('mounted: Vue 已經掛載到 DOM');
  }
});

app.mount('#app');

3. 更新階段

• beforeUpdate
  • 當數據變更後，在 DOM 重新渲染之前觸發。在這個階段，你可以獲得舊的 DOM 結構，並進行一些需要在更新之前完成的操作。
• updated
  • 當數據變更後，DOM 重新渲染完成後觸發。這個鉤子可以用來進行依賴 DOM 結構的操作，因為此時 DOM 已經是最新狀態。

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate: DOM 更新之前');
  },
  updated() {
    console.log('updated: DOM 更新之後');
  }
});

app.mount('#app');

4. 銷毀階段

• beforeUnmount
  • 在實例即將被銷毀之前調用。這時可以進行清理工作，如移除計時器、取消事件監聽器或解除第三方插件的綁定。
• unmounted
  • 在實例完全銷毀後觸發。此時，Vue 實例的所有指令、事件監聽器等已經被移除，這是做最終清理工作的時候。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeUnmount() {
    console.log('beforeUnmount: Vue 實例即將被銷毀');
  },
  unmounted() {
    console.log('unmounted: Vue 實例已經被銷毀');
  }
});

const vm = app.mount('#app');

// 5秒後銷毀 Vue 實例
setTimeout(() => {
  vm.unmount();
}, 5000);

---

3. Vue 3 中的新生命週期鉤子 (Composition API)

Vue 3 引入了 Composition API，提供了另一種管理生命週期的方法。與傳統的選項式 API 相比，使用 setup 函數和 onXxx 鉤子函數可以讓生命週期管理更加靈活。

• onBeforeMount()
• onMounted()
• onBeforeUpdate()
• onUpdated()
• onBeforeUnmount()
• onUnmounted()

範例：

import { createApp, onMounted, onUnmounted } from 'vue';

const app = createApp({
  setup() {
    onMounted(() => {
      console.log('onMounted: Vue 實例已掛載');
    });

    onUnmounted(() => {
      console.log('onUnmounted: Vue 實例已銷毀');
    });
  }
});

app.mount('#app');

---

4. 生命週期的使用場景

• 數據請求：在 created 或 mounted 中進行初始化的數據請求。
• 操作 DOM：在 mounted 中操作 DOM 節點。
• 性能優化：在 beforeUpdate 或 updated 中監聽更新前後的 DOM 變更。
• 清理工作：在 beforeUnmount 或 unmounted 中進行銷毀前的清理操作，如移除事件監聽器、停止定時器等。

---

總結

Vue 生命週期鉤子提供了豐富的鉤子函數來應對應用不同階段的需求。它們讓開發者可以在應用創建、掛載、更新、銷毀的不同時機進行自定義邏輯處理。搭配 Vue 3 的 Composition API，生命週期鉤子的使用更加靈活、直觀，讓我們能夠更好地控制應用的行為。