掌握Vue 3生命周期：從組合式API到高效代碼實踐

引言

在 Vue 3 中，生命周期的概念得到了進一步的優化和簡化。Vue 3 引入了組合式 API（Composition API），這為開發者提供了更靈活的方式來組織和重用代碼邏輯。與傳統的選項式 API（Options API）相比，組合式 API 使得生命周期鉤子的使用更加直觀和方便。

Vue 3 生命周期概述

Vue 3 引入了新的生命周期鉤子和改進了現有的生命周期管理方式，以適應組合式 API 的引入。生命周期鉤子是 Vue 組件中用于控制組件在不同階段執行特定邏輯的函數。了解這些鉤子對于構建高效和可維護的 Vue 應用程序至關重要。

Vue 3 中的生命周期鉤子

在 Vue 3 中，生命周期鉤子被分為兩個主要類別：組合式 API 鉤子和選項式 API 鉤子。組合式 API 提供了一種更靈活的方式來組織和重用代碼邏輯，而選項式 API 則保持了 Vue 2 的風格，適合那些熟悉舊版本的開發者。

組合式 API（Composition API）與生命周期鉤子的關系

組合式 API 通過引入?setup()?函數，為開發者提供了一種新的方式來編寫組件邏輯。在?setup()?函數中，你可以使用一系列的響應式函數和生命周期鉤子，這些鉤子與傳統的選項式 API 中的鉤子在功能上是等價的，但使用方式有所不同。

在組合式 API 中，生命周期鉤子被定義為獨立的函數，而不是作為組件選項。這意味著你可以根據需要導入和使用這些鉤子，而不是依賴于組件的選項對象。這種靈活性使得代碼更加模塊化和可重用。

例如，onMounted()?鉤子在組件掛載到 DOM 后被調用，無論是在?setup()?函數中直接使用，還是在其他組合式 API 函數中導入使用，其功能都是相同的，而且可以重復使用。這為開發者提供了更大的靈活性，允許他們在不同的上下文中重用生命周期邏輯。

Vue 3 生命周期鉤子詳解

setup()

作用和時機：setup()?是 Vue 3 組件的入口點，它在組件創建之前被調用，此時組件實例尚未創建。這是組合式 API 的核心，允許你在組件實例化之前執行邏輯，如定義響應式狀態、方法和生命周期鉤子。
setup() 中的生命周期鉤子：在?setup()?函數中，你可以直接使用生命周期鉤子，如?onMounted()、onUnmounted()?等，這些鉤子在組件的相應生命周期階段被調用。

onBeforeMount()

作用：onBeforeMount()?鉤子在組件即將掛載到 DOM 之前被調用。這是在組件的模板或渲染函數被編譯成虛擬 DOM 之后，但在實際 DOM 被創建和插入到頁面之前。
何時調用：在?setup()?函數之后，組件的模板或渲染函數被編譯后，但在 DOM 更新之前。

onMounted()

作用：onMounted()?鉤子在組件掛載到 DOM 后被調用。這是在組件的模板或渲染函數被編譯成虛擬 DOM，并且實際 DOM 被創建和插入到頁面之后。
何時調用：在?onBeforeMount()?鉤子之后，組件的 DOM 已經被創建并插入到頁面。

onBeforeUpdate()

作用：onBeforeUpdate()?鉤子在組件即將更新其 DOM 之前被調用。這是在響應式狀態變化后，但在實際 DOM 更新之前。
何時調用：在組件的響應式狀態變化后，但在 DOM 更新之前。

onUpdated()

作用：onUpdated()?鉤子在組件更新其 DOM 后被調用。這是在響應式狀態變化后，DOM 已經被更新。
何時調用：在?onBeforeUpdate()?鉤子之后，組件的 DOM 已經被更新。

onBeforeUnmount()

作用：onBeforeUnmount()?鉤子在組件即將卸載和銷毀之前被調用。這是在組件的 DOM 被移除之前，但在組件實例銷毀之前。
何時調用：在組件的 DOM 即將被移除之前。

onUnmounted()

作用：onUnmounted()?鉤子在組件卸載和銷毀后被調用。這是在組件的 DOM 已經被移除，組件實例已經銷毀。
何時調用：在?onBeforeUnmount()?鉤子之后，組件的 DOM 已經被移除，組件實例已經銷毀。

onErrorCaptured()

作用：onErrorCaptured()?鉤子在捕獲一個來自子孫組件的錯誤時被調用。這是在錯誤被拋出后，但在它被全局錯誤處理器處理之前。
何時調用：在子孫組件發生錯誤時。

onRenderTracked()

作用：onRenderTracked()?鉤子在渲染過程中追蹤到一個依賴時被調用。這是在組件的響應式依賴被追蹤時，通常用于調試。
何時調用：在組件的響應式依賴被追蹤時。

onRenderTriggered()

作用：onRenderTriggered()?鉤子在渲染過程中觸發一個依賴時被調用。這是在組件的響應式依賴被觸發時，通常用于調試。
何時調用：在組件的響應式依賴被觸發時。

這些生命周期鉤子為開發者提供了在組件生命周期的特定時刻執行代碼的能力，從而允許更精細地控制組件的行為和性能。在實際開發中，合理地使用這些鉤子可以提高應用的響應性和效率。

選項式和組合式

選項式 API（Options API）示例

在選項式 API 中，生命周期鉤子是作為組件對象的屬性定義的。

export default {data() {return {message: 'Hello Vue 3!'};},created() {console.log('組件創建完成', this.message);},mounted() {console.log('組件掛載完成', this.message);},beforeDestroy() {console.log('組件即將銷毀', this.message);}
};

在上面的示例中，created、mounted?和?beforeDestroy?是生命周期鉤子，它們分別在組件創建、掛載和銷毀之前被調用。

組合式 API（Composition API）示例

在組合式 API 中，生命周期鉤子是作為獨立的函數導入并使用的。

import { ref, onMounted, onBeforeUnmount } from 'vue';export default {setup() {const message = ref('Hello Vue 3!');onMounted(() => {console.log('組件掛載完成', message.value);});onBeforeUnmount(() => {console.log('組件即將銷毀', message.value);});return {message};}
};

在上面的示例中，onMounted?和?onBeforeUnmount?是生命周期鉤子，它們分別在組件掛載和即將銷毀之前被調用。ref?用于創建響應式數據。

選項式 API 與組合式 API 的主要區別

代碼組織：選項式 API 通過將邏輯組織在不同的選項（如?data,?methods,?created,?mounted?等）中，而組合式 API 通過?setup?函數將邏輯組織在一起，使得代碼更加模塊化和可重用。
靈活性：組合式 API 允許開發者在?setup?函數中自由地使用響應式 API 和生命周期鉤子，而選項式 API 的邏輯組織方式較為固定。
可讀性：對于熟悉 Vue 2 的開發者來說，選項式 API 可能更直觀易懂，而組合式 API 需要一定的學習曲線，但一旦掌握，可以編寫出更加清晰和可維護的代碼。

在實際開發中，你可以根據項目需求和個人偏好選擇使用選項式 API 或組合式 API。Vue 3 提供了這兩種 API，以適應不同場景和開發者的習慣。在組合式API中，我們可以把相關聯的模塊放到一個setup（）里，整個script由多個setup（）組成，個人認為組合式的出現是增加了代碼的可維護性，減少了‘鼠標滾輪掄到冒煙’這種情況。