完整教程：UniApp 全生命周期钩子详解

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

---