当前位置：首页 > news >正文

UniApp 全生命周期钩子详解

news 来源：原创 2025/6/7 0:17:53

👉 整理不易，如果本文对你有帮助，欢迎点个【赞 👍】+【收藏 ⭐】+【关注 🧡】
后续我们还将继续分享实用的 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`	增强用户分享体验