👉 整理不易，如果本文對你有幫助，歡迎點個【贊 👍】+【收藏 ?】+【關注 🧡】
后續我們還將繼續分享實用的 UniApp 教程，比如：

• 文件上傳
• 全局請求封裝
• 狀態管理
• 動態路由等…

📮 有任何問題歡迎留言交流哦！

---

🌟 收藏 + 點贊 + 關注 🌟

學習不迷路，持續更新實用教程，歡迎三連支持，讓我們一起進步！👍?🧡

---

📚 UniApp 全生命周期鉤子詳解

在 UniApp 中，理解生命周期鉤子是開發高質量應用的關鍵。不僅能讓我們在正確的時間初始化數據、監聽事件、釋放資源，還能提升整個應用的穩定性和用戶體驗。

UniApp 的生命周期融合了 Vue 的組件生命周期和各平臺（如小程序、H5、App）的頁面與應用生命周期，下面我們將分部分詳解。

---

🧩 一、應用生命周期（App Lifecycle）

📍應用生命周期指的是整個應用從啟動到退出的完整過程，這些鉤子定義在 App.vue 中，適用于全局邏輯控制，如初始化、錯誤處理、全局狀態管理等。

生命周期鉤子	觸發時機	常見用途
onLaunch	應用初始化時，僅觸發一次	初始化配置、獲取系統信息、檢查登錄狀態等
onShow	應用進入前臺或啟動時觸發	恢復狀態、處理跳轉參數等
onHide	應用進入后臺時觸發	暫停任務、保存數據
onError	腳本錯誤或 API 調用失敗時觸發	全局錯誤監控與上報
onPageNotFound	頁面不存在時觸發	自定義 404 頁面跳轉
onUnhandledRejection	Promise 被拒絕且未捕獲時觸發	異常統一處理

💡 示例代碼

// App.vue
export default {onLaunch(options) {console.log('App Launch', options)// 初始化操作},onShow(options) {console.log('App Show', options)},onHide() {console.log('App Hide')},onError(err) {console.error('App Error', err)},onPageNotFound(res) {console.log('Page Not Found', res)uni.reLaunch({ url: '/pages/404/404' })},onUnhandledRejection(event) {console.error('Unhandled Promise Rejection', event)}
}

📄 二、頁面生命周期（Page Lifecycle）

📍頁面生命周期發生在用戶訪問頁面的過程中，每個頁面（如 pages/index/index.vue）都有自己的一套生命周期鉤子。

生命周期鉤子	觸發時機	說明
onLoad	頁面加載時（只觸發一次）	接收跳轉參數，初始化數據
onShow	頁面每次顯示時觸發	刷新頁面數據
onReady	頁面首次渲染完成	可進行 DOM 操作
onHide	頁面被隱藏（如跳轉其他頁面）	暫停動畫、保存狀態
onUnload	頁面卸載（如返回上一頁）	清除定時器等資源
onPullDownRefresh	用戶下拉頁面時觸發	實現刷新邏輯（需配置）
onReachBottom	頁面滾動到底部時觸發	加載更多數據
onPageScroll	頁面滾動時觸發	用于監聽滾動高度
onResize	窗口大小變化時觸發	響應式布局
onShareAppMessage	用戶點擊右上角分享時觸發（小程序）	自定義分享內容
onTabItemTap	點擊 tab 頁面時觸發	獲取點擊 tab 信息

💡 示例代碼

// pages/index/index.vue
export default {onLoad(options) {console.log('Page Load', options)},onShow() {console.log('Page Show')},onReady() {console.log('Page Ready')},onHide() {console.log('Page Hide')},onUnload() {console.log('Page Unload')},onPullDownRefresh() {console.log('Pull Down Refresh')setTimeout(() => {uni.stopPullDownRefresh()}, 1000)},onReachBottom() {console.log('Reached Bottom')},onShareAppMessage() {return {title: '自定義分享標題',path: '/pages/index/index'}},onPageScroll(e) {console.log('Page Scroll', e.scrollTop)},onResize(e) {console.log('Resize', e.size)},onTabItemTap(item) {console.log('Tab Item Tap', item)}
}

---

🔄 三、Vue 生命周期與 UniApp 的關系

UniApp 頁面組件保留了 Vue 的生命周期鉤子（如 created、mounted、destroyed），它們與 UniApp 的生命周期一起工作：

? 執行順序舉例：

beforeCreate → created → beforeMount → mounted
↓
onLoad → onShow → onReady（UniApp特有）
↓
onHide / onUnload
→ beforeDestroy → destroyed

💡 注意：Vue 的 created 階段不能操作 DOM，應在 mounted 或 onReady 中進行。

---

🔧 四、應用場景總結

鉤子	場景應用示例
onLaunch	初始化全局狀態、獲取設備信息
onShow	頁面/應用從后臺回到前臺時刷新數據
onHide	頁面/應用切換或關閉時保存數據
onUnload	頁面銷毀時清理定時器
onReachBottom	分頁加載、數據追加
onPullDownRefresh	刷新內容數據
onError、onUnhandledRejection	統一錯誤處理，提升穩定性
onShareAppMessage	增強用戶分享體驗

---

🧠 五、開發建議

• ? 執行順序要清楚：Vue 與 UniApp 的生命周期有先后，操作 DOM 要放對位置。
• ? 多端適配要注意：不同平臺生命周期略有差異，建議測試時多平臺調試。
• ? 資源管理別忽視：如定時器、網絡請求要及時清理，避免內存泄漏。
• ? 全局錯誤需監控：用 onError、onUnhandledRejection 報錯上報/提醒。
• ? 參數接收別遺漏：onLoad 的 options 是跳轉參數關鍵來源。

---

? 總結

📌 UniApp 的生命周期鉤子 = Vue 生命周期 + 小程序生命周期 + 應用生命周期
掌握這些鉤子，就像掌握了頁面和應用行為的“遙控器”🔧。合理使用生命周期鉤子，不僅能讓你的頁面邏輯更清晰，還能顯著提升用戶體驗和程序性能。

---