概述

uni-app 基于 Vue.js 框架開發，其生命周期包含了三個層面：

• 應用生命周期：App.vue 的生命周期
• 頁面生命周期：各個頁面的生命周期
• Vue 組件生命周期：Vue.js 原生的組件生命周期

這三種生命周期在不同場景下會按特定順序執行，理解它們的執行時機對于開發高質量的 uni-app 應用至關重要。

---

一、應用生命周期（App.vue）

應用生命周期在 App.vue 中定義，用于監聽應用的啟動、顯示、隱藏等狀態。

1.1 生命周期函數

函數名	說明	平臺支持
onLaunch	當uni-app 初始化完成時觸發（全局只觸發一次）	全平臺
onShow	當uni-app 啟動，或從后臺進入前臺顯示	全平臺
onHide	當uni-app 從前臺進入后臺	全平臺
onError	當uni-app 報錯時觸發	全平臺
onUniNViewMessage	對nvue頁面發送的數據進行監聽	App
onUnhandledRejection	對未處理的 Promise 拒絕事件監聽函數	App
onPageNotFound	頁面不存在監聽函數	全平臺
onThemeChange	監聽系統主題變化	全平臺

1.2 示例代碼

// App.vue
<script>
export default {onLaunch: function(options) {console.log('App Launch', options);// 應用初始化完成// 可以在這里進行全局初始化操作},onShow: function(options) {console.log('App Show', options);// 應用從后臺進入前臺// 可以在這里刷新數據、重新建立連接等},onHide: function() {console.log('App Hide');// 應用從前臺進入后臺// 可以在這里保存數據、斷開連接等},onError: function(err) {console.log('App Error:', err);// 應用發生錯誤// 可以在這里進行錯誤上報}
}
</script>

---

二、頁面生命周期

頁面生命周期在各個頁面的 .vue 文件中定義，用于監聽頁面的加載、顯示、隱藏等狀態。

2.1 生命周期函數

函數名	說明	平臺支持
onInit	監聽頁面初始化	百度小程序
onLoad	監聽頁面加載，其參數為上個頁面傳遞的數據	全平臺
onShow	監聽頁面顯示。頁面每次出現在屏幕上都觸發	全平臺
onReady	監聽頁面初次渲染完成	全平臺
onHide	監聽頁面隱藏	全平臺
onUnload	監聽頁面卸載	全平臺
onResize	監聽窗口尺寸變化	App、微信小程序
onPullDownRefresh	監聽用戶下拉動作	全平臺
onReachBottom	頁面滾動到底部的事件	全平臺
onTabItemTap	點擊 tab 時觸發	微信小程序、支付寶小程序、百度小程序、H5、App
onShareAppMessage	用戶點擊右上角分享	微信小程序、百度小程序、字節跳動小程序、支付寶小程序
onPageScroll	監聽頁面滾動	全平臺
onNavigationBarButtonTap	監聽原生標題欄按鈕點擊事件	App、H5
onBackPress	監聽頁面返回	app、H5、支付寶小程序
onNavigationBarSearchInputChanged	監聽原生標題欄搜索輸入框輸入內容變化事件	App、H5
onNavigationBarSearchInputConfirmed	監聽原生標題欄搜索輸入框搜索事件	App、H5
onNavigationBarSearchInputClicked	監聽原生標題欄搜索輸入框點擊事件	App、H5
onShareTimeline	監聽用戶點擊右上角轉發到朋友圈	微信小程序
onAddToFavorites	監聽用戶點擊右上角收藏	微信小程序

2.2 示例代碼

// pages/index/index.vue
<script>
export default {data() {return {title: 'Hello'}},onLoad: function(options) {console.log('頁面加載', options);// 頁面加載時觸發，可以獲取上個頁面傳遞的參數},onShow: function() {console.log('頁面顯示');// 頁面顯示/切入前臺時觸發},onReady: function() {console.log('頁面初次渲染完成');// 頁面初次渲染完成時觸發},onHide: function() {console.log('頁面隱藏');// 頁面隱藏/切入后臺時觸發},onUnload: function() {console.log('頁面卸載');// 頁面卸載時觸發},onPullDownRefresh: function() {console.log('下拉刷新');// 用戶下拉刷新時觸發// 需要在頁面配置中開啟enablePullDownRefresh},onReachBottom: function() {console.log('頁面觸底');// 頁面滾動到底部時觸發}
}
</script>

---

三、Vue 組件生命周期

uni-app 完全支持 Vue.js 的組件生命周期，這些生命周期在組件級別工作。

3.1 生命周期函數

函數名	說明	觸發時機
beforeCreate	實例初始化之后，數據觀測和事件配置之前	組件實例剛創建
created	實例創建完成后立即調用	數據觀測、屬性和方法的運算、事件回調已配置
beforeMount	在掛載開始之前被調用	render函數首次被調用前
mounted	實例被掛載后調用	el被新創建的vm.$el替換后
beforeUpdate	數據更新時調用	虛擬DOM重新渲染和打補丁前
updated	數據更新后調用	虛擬DOM重新渲染和打補丁后
activated	keep-alive組件激活時調用	組件被激活
deactivated	keep-alive組件停用時調用	組件被停用
beforeDestroy	實例銷毀之前調用	實例仍完全可用
destroyed	實例銷毀后調用	所有指令解綁、事件監聽器移除、子實例銷毀

3.2 示例代碼

// 組件生命周期示例
<script>
export default {data() {return {message: 'Hello uni-app'}},beforeCreate() {console.log('beforeCreate - 實例初始化');},created() {console.log('created - 實例創建完成');// 在這里可以訪問data、computed、methods等// 但還不能訪問DOM},beforeMount() {console.log('beforeMount - 掛載前');},mounted() {console.log('mounted - 掛載完成');// 在這里可以訪問DOM// 發起網絡請求的好時機},beforeUpdate() {console.log('beforeUpdate - 更新前');},updated() {console.log('updated - 更新完成');},beforeDestroy() {console.log('beforeDestroy - 銷毀前');// 清理工作：清除定時器、取消網絡請求等},destroyed() {console.log('destroyed - 銷毀完成');}
}
</script>

---

四、生命周期執行順序

理解不同生命周期的執行順序對于正確處理業務邏輯非常重要。

4.1 應用啟動時的執行順序

1. App.onLaunch         (應用啟動)
2. App.onShow           (應用顯示)
3. beforeCreate         (頁面組件創建前)
4. created              (頁面組件創建完成)
5. onLoad               (頁面加載)
6. onShow               (頁面顯示)
7. beforeMount          (頁面掛載前)
8. mounted              (頁面掛載完成)
9. onReady              (頁面初次渲染完成)

4.2 頁面跳轉時的執行順序

從頁面A跳轉到頁面B：

頁面A:
1. onHide               (頁面A隱藏)頁面B:
2. beforeCreate         (頁面B創建前)
3. created              (頁面B創建完成)
4. onLoad               (頁面B加載)
5. onShow               (頁面B顯示)
6. beforeMount          (頁面B掛載前)
7. mounted              (頁面B掛載完成)
8. onReady              (頁面B初次渲染完成)

4.3 頁面返回時的執行順序

從頁面B返回到頁面A：

頁面B:
1. onUnload             (頁面B卸載)
2. beforeDestroy        (頁面B銷毀前)
3. destroyed            (頁面B銷毀完成)頁面A:
4. onShow               (頁面A重新顯示)

4.4 應用進入后臺/前臺時的執行順序

應用進入后臺：

1. 當前頁面.onHide      (當前頁面隱藏)
2. App.onHide           (應用進入后臺)

應用從后臺回到前臺：

1. App.onShow           (應用回到前臺)
2. 當前頁面.onShow      (當前頁面顯示)

五、最佳實踐

5.1 各生命周期的使用場景

App.vue 生命周期

• onLaunch: 全局初始化、用戶登錄狀態檢查、配置初始化
• onShow: 應用從后臺回到前臺時的數據刷新
• onHide: 數據保存、連接斷開

頁面生命周期

• onLoad: 接收頁面參數、初始化頁面數據
• onShow: 頁面數據刷新（每次顯示都會執行）
• onReady: 獲取頁面元素、設置頁面初始狀態
• onHide: 暫停定時器、保存用戶輸入
• onUnload: 清理資源、取消網絡請求

Vue 組件生命周期

• created: 數據初始化、事件監聽器設置
• mounted: DOM操作、網絡請求、第三方插件初始化
• beforeDestroy: 清理定時器、事件監聽器、取消網絡請求