在 Vue.js 開發中，理解組件的生命周期是構建健壯應用程序的關鍵。雖然 Vue3 引入了 Composition API，但 Options API 仍然是許多開發者的首選，特別是對于從 Vue2 遷移的項目或更喜歡基于選項的代碼組織的團隊。本文將深入探討 Vue3 中 Options API 的生命周期函數，幫助您掌握組件從創建到銷毀的完整過程。
1. 生命周期概覽
Vue3 的生命周期與 Vue2 相比有一些變化，主要是為了更好的支持 Composition API 并優化性能。以下是完整的生命周期圖示：
setup (Composition API 特有)
|
└── beforeCreate└── created└── beforeMount└── mounted├── beforeUpdate│ └── updated├── activated (keep-alive 組件特有)│ └── deactivated (keep-alive 組件特有)└── beforeUnmount└── unmounted
2. 各生命周期鉤子詳解
2.1 beforeCreate
觸發時機：在實例初始化之后，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
典型用途：
- 執行一些不依賴響應式數據的初始化邏輯
- 設置一些實例屬性，這些屬性可能在后續的 created 鉤子中使用
export default {beforeCreate() {console.log('beforeCreate: 實例剛創建，數據觀測未初始化');console.log(this.$data); // undefinedconsole.log(this.someData); // undefined},data() {return {someData: 'Hello'}}
}
2.2 created
觸發時機：在實例創建完成后被立即調用。在這一步，實例已完成以下配置：
- 數據觀測 (data observer)
- 屬性和方法的運算
- watch/event 事件回調
典型用途：
- 訪問響應式數據
- 發起異步請求獲取數據
- 初始化一些需要響應式數據的邏輯
export default {data() {return {message: 'Hello Vue!'}},created() {console.log('created: 實例已創建，數據觀測已初始化');console.log(this.message); // 'Hello Vue!'// 發起API請求this.fetchData();},methods: {fetchData() {// 異步數據獲取邏輯}}
}
2.3 beforeMount
觸發時機：在掛載開始之前被調用，相關的 render 函數首次被調用。
典型用途：
- 在組件掛載到DOM之前執行最后的準備工作
- 很少需要在此鉤子中進行操作，大多數情況下使用 created 或 mounted 更合適
export default {beforeMount() {console.log('beforeMount: 模板編譯完成，即將掛載到DOM');console.log(this.$el); // undefined，尚未掛載}
}
2.4 mounted
觸發時機：實例被掛載后調用，這時 el 被新創建的 vm.$el 替換。
典型用途：
- 訪問或操作DOM元素
- 集成第三方庫需要DOM存在的場景
- 執行依賴于DOM的初始化操作
export default {mounted() {console.log('mounted: 實例已掛載到DOM');console.log(this.$el); // 可以訪問DOM元素// 使用第三方圖表庫this.initChart();},methods: {initChart() {const ctx = this.$refs.chartCanvas.getContext('2d');// 初始化圖表...}}
}
2.5 beforeUpdate
觸發時機：數據更新時調用，發生在虛擬 DOM 打補丁之前。
典型用途：
- 在組件更新前訪問現有的DOM狀態
- 跟蹤組件更新前的狀態
export default {data() {return {counter: 0}},beforeUpdate() {console.log('beforeUpdate: 數據即將更新');console.log('當前值:', this.$refs.counter.textContent);}
}
2.6 updated
觸發時機：由于數據更改導致的虛擬 DOM 重新渲染和打補丁后調用。
典型用途：
- 執行依賴于DOM更新的操作
- 謹慎使用，避免在此鉤子中修改狀態，可能導致無限更新循環
export default {data() {return {items: []}},updated() {console.log('updated: DOM已更新');// 在列表更新后滾動到底部this.$refs.list.scrollTop = this.$refs.list.scrollHeight;}
}
2.7 beforeUnmount (Vue2中的beforeDestroy)
觸發時機：實例銷毀之前調用。在這一步，實例仍然完全可用。
典型用途：
- 清理定時器
- 取消事件監聽
- 清理第三方庫的實例
export default {data() {return {timer: null}},created() {this.timer = setInterval(() => {console.log('Timer tick');}, 1000);},beforeUnmount() {console.log('beforeUnmount: 實例即將銷毀');clearInterval(this.timer);}
}
2.8 unmounted (Vue2中的destroyed)
觸發時機：實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
典型用途：
- 執行最后的清理工作
- 報告分析數據或日志
export default {unmounted() {console.log('unmounted: 實例已銷毀');// 發送日志this.sendAnalytics('Component destroyed');}
}
2.9 activated 和 deactivated (keep-alive 特有)
觸發時機：
- activated：被 keep-alive 緩存的組件激活時調用
- deactivated：被 keep-alive 緩存的組件失活時調用
典型用途：
- 恢復或暫停組件特定的行為
- 獲取最新數據（activated）
- 保存組件狀態（deactivated）
export default {activated() {console.log('activated: 組件被激活');// 獲取最新數據this.fetchData();},deactivated() {console.log('deactivated: 組件被緩存');// 保存滾動位置this.scrollPosition = this.$refs.list.scrollTop;}
}
3. Vue2 到 Vue3 的生命周期變化
-
重命名：
beforeDestroy→beforeUnmountdestroyed→unmounted
-
新增：
renderTracked和renderTriggered（主要用于調試）
-
行為變化：
- 生命周期鉤子現在都使用異步隊列執行，確保一致性
4. 最佳實踐
-
數據獲取：通常在
created鉤子中進行異步數據獲取，這樣可以在組件掛載前盡早開始請求。 -
DOM操作：必須在
mounted鉤子中進行，因為只有這時DOM才存在。 -
清理工作：在
beforeUnmount中清理定時器、事件監聽器等，防止內存泄漏。 -
避免在 updated 中修改狀態：這可能導致無限更新循環。
-
keep-alive 組件優化：使用
activated和deactivated來管理緩存組件的狀態。 -
代碼組織：將相關生命周期邏輯分組注釋，提高代碼可讀性。
export default {// 數據相關data() { /* ... */ },created() { /* 數據初始化 */ },// DOM相關mounted() { /* DOM操作 */ },beforeUnmount() { /* 清理DOM相關資源 */ },// 狀態更新相關beforeUpdate() { /* 更新前操作 */ },updated() { /* 更新后操作 */ },// keep-alive相關activated() { /* 恢復狀態 */ },deactivated() { /* 保存狀態 */ }
}
5. 常見問題解答
Q: created 和 mounted 哪個更適合發起API請求？
A: 通常建議在 created 中發起API請求，這樣可以盡早開始數據獲取，減少用戶等待時間。只有在請求結果直接影響DOM時才需要在 mounted 中發起請求。
Q: 為什么我的 beforeUpdate 鉤子沒有被觸發？
A: beforeUpdate 只在響應式數據變化導致重新渲染時觸發。如果您的數據變化不影響模板，或者使用了非響應式數據，鉤子不會被調用。
Q: Vue3 中是否可以混用 Options API 和 Composition API 的生命周期？
A: 可以，但不推薦。Composition API 使用 setup() 函數中的生命周期鉤子（如 onMounted），而 Options API 使用我們討論的這些鉤子。混用可能導致邏輯分散，降低代碼可讀性。
6. 結語
理解 Vue3 的 Options API 生命周期鉤子是構建高效、可維護 Vue 應用程序的基礎。通過合理利用這些鉤子，您可以精確控制組件的行為，優化性能，并避免常見問題。隨著對生命周期的深入理解，您將能夠編寫出更加健壯和可預測的 Vue 組件。
記住，雖然生命周期鉤子提供了強大的控制能力，但過度使用它們可能導致代碼難以維護。始終考慮是否有更簡單的方式來實現您的需求，例如使用計算屬性或偵聽器來代替某些生命周期邏輯。
)