Vue生命周期的演變：從Vue 2到Vue 3的深度剖析

1. 生命周期鉤子的概念與意義

Vue框架通過生命周期鉤子函數使開發者可以在組件不同階段執行自定義邏輯。這些鉤子函數是Vue組件生命周期中的關鍵切入點，對于控制組件行為至關重要。

2. Vue 2中的生命周期鉤子

2.1 完整的生命周期鉤子序列

Vue 2提供了一系列生命周期鉤子，按執行順序排列：

export default {// 創建階段beforeCreate() {// 實例初始化之后，數據觀測和事件配置之前},created() {// 實例創建完成，可訪問data、methods等},// 掛載階段beforeMount() {// 掛載開始之前調用},mounted() {// DOM掛載完成后調用},// 更新階段beforeUpdate() {// 數據更新時調用，但視圖尚未重新渲染},updated() {// 視圖更新完畢后調用},// 銷毀階段beforeDestroy() {// 實例銷毀前調用},destroyed() {// 實例銷毀后調用},// 特殊鉤子activated() {// keep-alive組件激活時調用},deactivated() {// keep-alive組件停用時調用},errorCaptured(err, vm, info) {// 捕獲后代組件錯誤時調用}
}

2.2 各鉤子函數的可訪問性與用途

beforeCreate

可訪問性：

• ? 無法訪問組件實例data
• ? 無法訪問methods
• ? 無法訪問計算屬性
• ? 無法訪問props
• ? 響應式系統尚未初始化

實際用途：

1. 插件初始化：如Vue Router、Vuex等插件會在此階段進行初始化
2. 全局配置：設置一些應用級別的配置
3. 性能追蹤：啟動性能監測計時器

雖然beforeCreate能做的事情很有限，但在特定場景下非常有價值，特別是對于需要在Vue實例初始化的最早期執行的邏輯。

created

可訪問性：

• ? 可訪問響應式數據(data)
• ? 可訪問methods方法
• ? 可訪問計算屬性
• ? 可訪問props
• ? 無法訪問DOM(this.$el不可用)

實際用途：

1. 數據初始化：進行不依賴DOM的數據處理
2. API請求：發起初始數據請求
3. 注冊事件監聽：設置全局事件監聽
4. 初始化第三方庫：初始化不依賴DOM的第三方庫

created是進行數據初始化和API請求的理想位置，因為此時數據響應系統已經就緒，但DOM尚未渲染，可以避免不必要的DOM更新。

2.3 為什么需要beforeCreate和created？

雖然看起來beforeCreate似乎作用有限，但Vue設計這兩個鉤子有其深思熟慮的原因：

1. 分離關注點：

   • beforeCreate：專注于實例初始化前的邏輯
   • created：專注于數據初始化的邏輯

2. 插件架構：許多Vue插件需要在不同階段注入功能

   // Vue Router的實現部分依賴beforeCreate
   Vue.mixin({beforeCreate() {// 初始化路由}
   })
   

3. 調試和性能監測：可以精確測量組件不同階段的性能

3. Vue 3中的生命周期變化

3.1 命名調整與組合式API引入

Vue 3對生命周期鉤子進行了兩方面的變化：

1. 命名調整：更準確地反映鉤子的作用

   • beforeDestroy → onBeforeUnmount
   • destroyed → onUnmounted

2. 組合式API形式：提供函數式的生命周期鉤子

   • beforeCreate/created → 直接在setup函數中編寫
   • beforeMount → onBeforeMount
   • mounted → onMounted
   • beforeUpdate → onBeforeUpdate
   • updated → onUpdated
   • errorCaptured → onErrorCaptured
   • 新增：onRenderTracked、onRenderTriggered（調試用）

3.2 setup與beforeCreate/created的關系

重要澄清：setup函數并非簡單地等同于beforeCreate和created的合并。

實際上，setup函數執行時機是在組件實例創建之前，甚至早于beforeCreate。在使用選項式API的Vue 3組件中，如果同時定義了setup、beforeCreate和created，執行順序是：

1. setup
2. beforeCreate
3. created

// Vue 3中這三者可以共存
export default {setup() {console.log('setup執行');return {};},beforeCreate() {console.log('beforeCreate執行');},created() {console.log('created執行');}
}
// 輸出順序：setup執行 → beforeCreate執行 → created執行

<script setup>是Vue 3.2引入的語法糖，它會將整個腳本塊編譯為組件的setup函數，但并非取代了beforeCreate和created鉤子的功能，而是提供了更便捷的編寫方式。

3.3 組合式API中的生命周期鉤子

在<script setup>或setup()函數中，可以使用以下方式引入生命周期鉤子：

import { onMounted, onBeforeUnmount, onUpdated } from 'vue';// 在<script setup>中
onMounted(() => {console.log('組件掛載完成');
});onBeforeUnmount(() => {console.log('組件即將卸載');
});

在add-modal.vue組件中，使用了onMounted鉤子：

onMounted(async () => {// 初始化行業樹initIndustryTree();// 獲取字典數據const dictsToFetch = ['sector', 'scaleLevel', 'SSLY', 'district'];const res = await useDict(dictsToFetch.join(','));// ...處理字典數據// 獲取詳情數據getDetail();
});

4. API請求應該放在哪個生命周期鉤子中？

這是一個常被討論的問題，需要根據具體情況決定。

4.1 created vs mounted的對比

在created中發送API請求：

• ? 更早開始數據加載，可能減少用戶等待時間
• ? 適用于服務端渲染(SSR)場景
• ? 數據響應系統已就緒
• ? 不能訪問DOM元素
• ? 可能無法正確處理需要可見性檢查的組件

在mounted中發送API請求：

• ? 可以訪問DOM元素
• ? 可以基于元素可見性或尺寸決定是否請求
• ? 可以更容易地與DOM相關的庫集成
• ? 比created晚執行，可能增加首次渲染等待時間

4.2 最佳實踐與決策依據

選擇在哪個鉤子發送請求應考慮以下因素：

1. DOM依賴：請求是否需要訪問DOM元素？

   • 需要：使用mounted
   • 不需要：可以使用created

2. 數據緊急性：數據是否需要盡快獲取？

   • 首屏關鍵數據：優先使用created
   • 次要數據：可以使用mounted或延遲加載

3. SSR考慮：應用是否使用服務端渲染？

   • 使用SSR：created中的代碼在服務端和客戶端都會執行
   • 僅客戶端數據：考慮在mounted(僅客戶端執行)

4. 條件請求：請求是否基于組件狀態或用戶交互？

   • 基于交互：放在事件處理函數中
   • 基于組件可見性：使用mounted配合視口檢測

4.3 示例案例分析

在我們的add-modal.vue示例中，API請求放在了onMounted中：

onMounted(async () => {// 初始化行業樹initIndustryTree();// 獲取字典數據和詳情數據const dictsToFetch = ['sector', 'scaleLevel', 'SSLY', 'district'];const res = await useDict(dictsToFetch.join(','));// ...getDetail();
});

此案例選擇onMounted的原因可能是：

1. 行業樹初始化可能涉及DOM操作
2. 組件完全掛載后再請求數據，確保UI已準備就緒
3. 遵循團隊一致的開發規范
4. 非關鍵性數據，可以在DOM渲染后再加載

5. Vue 3組合式API的生命周期優勢

5.1 邏輯復用與關注點分離

Vue 3組合式API允許生命周期鉤子與相關邏輯一起組織，這是相比Vue 2的重大改進：

Vue 2中的邏輯分散：

export default {data() {return { chartData: null }},created() {this.fetchChartData();},mounted() {this.initChart();},beforeDestroy() {this.disposeChart();},methods: {fetchChartData() { /* ... */ },initChart() { /* ... */ },disposeChart() { /* ... */ }}
}

Vue 3組合式API實現相同功能：

function useChart() {const chartData = ref(null);const chartInstance = ref(null);// 數據獲取邏輯function fetchChartData() { /* ... */ }// 圖表初始化和銷毀邏輯function initChart() { /* ... */ }function disposeChart() { /* ... */ }// 所有相關生命周期鉤子集中在一起onMounted(() => {fetchChartData();initChart();});onBeforeUnmount(() => {disposeChart();});return { chartData, chartInstance, fetchChartData };
}// 在組件中使用
const { chartData, chartInstance } = useChart();

5.2 多次調用同一生命周期鉤子

Vue 3允許多次調用同一個生命周期鉤子，它們會按調用順序執行：

onMounted(() => {console.log('第一個onMounted回調');
});onMounted(() => {console.log('第二個onMounted回調');
});// 輸出順序：第一個onMounted回調 → 第二個onMounted回調

這使得將相關邏輯封裝在不同的組合函數中成為可能，每個組合函數可以管理自己的生命周期鉤子。

5.3 明確的依賴關系

組合式API中的生命周期鉤子可以捕獲其作用域中的變量，使依賴關系更加明確：

function useFeature(props) {const localState = ref(0);// 此onMounted明確依賴props和localStateonMounted(() => {if (props.condition) {localState.value = 10;}});return { localState };
}

6. add-modal.vue示例中的生命周期應用

6.1 代碼分析

add-modal.vue組件展示了Vue 3組合式API的優勢：

// 組件級生命周期
onMounted(async () => {// 初始化行業樹initIndustryTree();// 獲取字典數據const dictsToFetch = ['sector', 'scaleLevel', 'SSLY', 'district'];const res = await useDict(dictsToFetch.join(','));// ...處理字典數據// 獲取詳情數據getDetail();
});// 使用組合式API分離關注點
const {formRef,formData,// ...
} = useFormData({ defaultOptions, type: props.type });const {industryTreeData,// ...initIndustryTree,
} = useIndustryTree({ formData });const { getDetail } = useDetailData({// ...依賴項
});

這種組織方式體現了幾個關鍵優勢：

1. 邏輯分組：相關功能封裝在獨立的組合函數中
2. 關注點分離：表單處理、行業樹、詳情數據各自獨立
3. 依賴明確：每個組合函數明確聲明其依賴

6.2 組合函數中的生命周期鉤子

盡管在組件中只看到一個onMounted，但各個組合函數內部可能包含自己的生命周期鉤子：

// 可能的useIndustryTree實現
function useIndustryTree({ formData }) {const industryTreeData = ref([]);// 組合函數內部的生命周期鉤子onMounted(() => {// 一些初始化邏輯});// 對外暴露的初始化方法function initIndustryTree() {// ...初始化邏輯}return {industryTreeData,initIndustryTree,// ...};
}

這種模式使每個組合函數可以管理自己的內部狀態和生命周期，同時向外提供清晰的接口。

7. 生命周期鉤子的選擇策略

7.1 選項式API中的選擇策略

需求	推薦鉤子	理由
插件初始化	beforeCreate	在實例初始化的最早期執行
數據初始化	created	可訪問響應式數據，尚未渲染DOM
不依賴DOM的API請求	created	更早獲取數據，減少等待
DOM操作	mounted	DOM已完全渲染
DOM依賴的API請求	mounted	可訪問DOM元素和尺寸
清理事件監聽	beforeDestroy	組件銷毀前進行清理

7.2 組合式API中的選擇策略

需求	推薦方式	理由
數據初始化	setup函數或組合函數中	在邏輯相關位置初始化
事件訂閱	組合函數 + onMounted	集中管理相關邏輯
API請求	組合函數 + onMounted	可根據需要自定義請求時機
DOM操作	onMounted	DOM已渲染完成
清理工作	onBeforeUnmount	組件卸載前執行清理

7.3 實際項目中的最佳實踐

1. 按功能組織代碼：使用組合函數將相關邏輯組織在一起

   // 示例：表單相關邏輯集中管理
   function useForm() {const form = ref({});onMounted(() => {// 表單初始化邏輯});return { form, /* 其他表單相關功能 */ };
   }
   

2. 顯式聲明依賴：組合函數應明確其參數依賴

   // 明確聲明依賴formData
   function useValidation({ formData }) {// 使用formData的驗證邏輯
   }
   

3. 合理使用生命周期鉤子：在合適的鉤子中執行對應邏輯

   // API請求策略
   function useData() {const data = ref(null);const loading = ref(false);// 立即加載的數據function fetchImportantData() {// 立即執行，不等待DOM}// DOM依賴的數據onMounted(() => {fetchDomDependentData();});return { data, loading, fetchImportantData };
   }
   

8. 深入理解生命周期

8.1 父子組件的生命周期執行順序

Vue的生命周期在父子組件間遵循特定的執行順序：

掛載階段：

1. 父組件 beforeCreate
2. 父組件 created
3. 父組件 beforeMount
4. 子組件 beforeCreate
5. 子組件 created
6. 子組件 beforeMount
7. 子組件 mounted
8. 父組件 mounted

更新階段：

1. 父組件 beforeUpdate
2. 子組件 beforeUpdate
3. 子組件 updated
4. 父組件 updated

卸載階段：

1. 父組件 beforeUnmount
2. 子組件 beforeUnmount
3. 子組件 unmounted
4. 父組件 unmounted

這種順序符合"由外到內"創建和掛載，"由內到外"銷毀的原則。

8.2 異步組件的生命周期

異步組件的生命周期與普通組件有所不同：

1. 父組件 mounted
2. 異步組件加載完成
3. 異步組件 beforeCreate…mounted

在Vue 3中，defineAsyncComponent提供了更強大的異步組件支持，允許定義加載、錯誤等狀態。

8.3 性能考量與調試

Vue 3提供了兩個專門用于調試的生命周期鉤子：

import { onRenderTracked, onRenderTriggered } from 'vue';// 當組件渲染過程中追蹤到響應式依賴時觸發
onRenderTracked((event) => {console.log('依賴被追蹤:', event);
});// 當響應式依賴變化觸發組件重新渲染時觸發
onRenderTriggered((event) => {console.log('重新渲染被觸發:', event);
});

這些鉤子對于定位性能問題和理解組件重新渲染的原因非常有價值。

9. 組合式API與生命周期的最佳實踐

9.1 邏輯組織示例

以add-modal.vue為例，可以更深入地看到組合式API如何組織邏輯：

// 表單數據管理
function useFormData(options) {const formRef = ref(null);const formData = ref(initFormData());// 內部生命周期管理onMounted(() => {// 表單初始化邏輯});// 表單相關方法function resetForm() { /* ... */ }function validate() { /* ... */ }return {formRef,formData,resetForm,validate,// ...其他屬性和方法};
}// 行業樹管理
function useIndustryTree({ formData }) {const industryTreeData = ref([]);// 初始化方法function initIndustryTree() { /* ... */ }// 處理行業樹變化function handleIndustryChange(val) {formData.value.industry = val;// ...其他邏輯}return {industryTreeData,initIndustryTree,handleIndustryChange,// ...其他屬性和方法};
}

這種組織方式具有幾個優勢：

1. 相關邏輯集中在一起，便于維護
2. 跨組件復用變得簡單
3. 測試更加容易，可以獨立測試每個組合函數

9.2 避免常見陷阱

1. 不要在生命周期鉤子中無條件修改響應式狀態：

   // 錯誤示例
   onUpdated(() => {// 無條件修改狀態，導致無限更新循環count.value++;
   });// 正確示例
   onUpdated(() => {if (needsUpdate && !isUpdating.value) {isUpdating.value = true;count.value++;isUpdating.value = false;}
   });
   

2. 確保清理所有副作用：

   // 正確清理事件監聽
   onMounted(() => {window.addEventListener('resize', handleResize);
   });onBeforeUnmount(() => {window.removeEventListener('resize', handleResize);
   });
   

3. 不要依賴特定的鉤子執行順序：

   // 避免跨組件鉤子依賴
   const ready = ref(false);onMounted(() => {// 不要假設其他組件已經掛載// 使用其他機制（如props或事件）進行協調ready.value = true;
   });
   

10. 總結與展望

10.1 Vue生命周期演變的核心思想

Vue生命周期鉤子的演變反映了幾個核心思想：

1. 從隱式到顯式：Vue 3中的設計更加顯式，使代碼意圖更清晰
2. 從分散到聚合：組合式API允許按功能而非生命周期階段組織代碼
3. 從固定到靈活：Vue 3中的生命周期鉤子可以多次使用，更加靈活

10.2 生命周期使用的核心原則

無論使用Vue 2還是Vue 3，選擇合適的生命周期鉤子應遵循以下原則：

1. 理解執行時機：清楚了解每個鉤子的執行時機和可訪問內容
2. 最小必要原則：在盡可能晚的生命周期階段執行操作
3. 關注點分離：相關邏輯應該組織在一起，而非分散在不同鉤子中
4. 清理資源：確保在組件銷毀前清理所有副作用

10.3 未來趨勢

隨著Vue生態系統的發展，我們可以預見幾個趨勢：

1. 更細粒度的生命周期控制：未來可能提供更精細的生命周期控制
2. 更強大的調試工具：專注于生命周期和性能分析的工具
3. 更智能的編譯時優化：根據生命周期使用模式進行自動優化

在add-modal.vue這樣的復雜組件中，Vue 3的組合式API和生命周期鉤子的改進已經顯示出明顯優勢，通過邏輯組織的改進，代碼變得更加清晰、可維護，也更容易測試和優化。深入理解這些生命周期概念，對于構建高質量的Vue應用至關重要。