Vue.js 的生命周期鉤子函數是理解 Vue 組件行為的關鍵。每個 Vue 實例在創建、更新和銷毀過程中都會經歷一系列的生命周期階段，每個階段都有對應的鉤子函數，開發者可以在這些鉤子函數中執行特定的操作。

Vue 生命周期概述

Vue 的生命周期可以分為以下幾個主要階段：

1. 創建階段（Creation）

2. 掛載階段（Mounting）

3. 更新階段（Updating）

4. 銷毀階段（Destruction）

每個階段都有對應的鉤子函數，以下是詳細的解析：

1. 創建階段（Creation）

在創建階段，Vue 實例被初始化，但尚未掛載到 DOM 中。

• beforeCreate

  • 調用時機：在實例初始化之后，數據觀測 (data observer) 和事件配置之前被調用。

  • 用途：此時組件的?data?和?methods?還未初始化，通常用于插件開發或執行一些不需要訪問數據的初始化操作。

• created

  • 調用時機：在實例創建完成后被調用，此時數據觀測 (data observer) 已經完成，屬性和方法的運算也已完成，但尚未掛載到 DOM 中。

  • 用途：可以訪問?data?和?methods，常用于發起異步請求、初始化數據等操作。

2. 掛載階段（Mounting）

在掛載階段，Vue 實例被掛載到 DOM 中。

• beforeMount

  • 調用時機：在掛載開始之前被調用，此時模板已經編譯完成，但尚未將生成的 DOM 替換到頁面上。

  • 用途：可以在此階段對 DOM 進行最后的修改。

• mounted

  • 調用時機：在實例掛載到 DOM 后被調用，此時組件已經出現在頁面中，DOM 已經更新。

  • 用途：可以訪問 DOM 元素，常用于執行依賴于 DOM 的操作，如初始化第三方庫、綁定事件等。

3. 更新階段（Updating）

在更新階段，Vue 實例的數據發生變化，導致 DOM 重新渲染。

• beforeUpdate

  • 調用時機：在數據更新導致虛擬 DOM 重新渲染和打補丁之前被調用。

  • 用途：可以在更新之前訪問現有的 DOM，如手動移除事件監聽器等。

• updated

  • 調用時機：在數據更新導致虛擬 DOM 重新渲染和打補丁之后被調用。

  • 用途：可以執行依賴于 DOM 更新的操作，但要注意避免在此鉤子中修改狀態，以免導致無限循環。

4. 銷毀階段（Destruction）

在銷毀階段，Vue 實例被銷毀并從 DOM 中移除。

• beforeDestroy

  • 調用時機：在實例銷毀之前調用，此時實例仍然完全可用。

  • 用途：可以執行清理操作，如清除定時器、取消事件監聽等。

• destroyed

  • 調用時機：在實例銷毀之后調用，此時所有的事件監聽器和子實例都已被移除。

  • 用途：可以執行最后的清理操作，但此時無法再訪問實例的?data?和?methods。

生命周期圖示

以下是 Vue 生命周期的簡化圖示：

beforeCreate --> created --> beforeMount --> mounted --> beforeUpdate --> updated --> beforeDestroy --> destroyed

總結

Vue 的生命周期鉤子函數為開發者提供了在組件不同階段執行代碼的機會。理解這些鉤子函數的調用時機和用途，有助于更好地控制組件的行為，優化性能，并避免潛在的問題。

在實際開發中，常用的鉤子函數包括?created、mounted、beforeUpdate?和?beforeDestroy，它們分別用于數據初始化、DOM 操作、更新前處理和清理操作。