👉 整理不易，如果本文对你有帮助，欢迎点个【赞 👍】+【收藏 ⭐】+【关注 🧡】
后续我们还将继续分享实用的 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 生命周期 + 小程序生命周期 + 应用生命周期
掌握这些钩子，就像掌握了页面和应用行为的“遥控器”🔧。合理使用生命周期钩子，不仅能让你的页面逻辑更清晰，还能显著提升用户体验和程序性能。