uni-app页面生命周期需严格遵循onload→onshow→onready顺序执行,onhide用于页面暂隐,onunload必须清理定时器等资源,数据刷新应放在onshow中,app.vue的onlaunch和onshow会影响全局页面行为。

在HBuilderX中开发uni-app时,页面从加载到显示再到卸载的整个过程必须精准控制,否则会出现白屏、数据错乱、定时器未清除导致内存泄漏等问题。
页面首次加载:onLoad → onShow → onReady 的执行顺序
页面第一次进入时,三个生命周期钩子按固定顺序触发,不可跳过或重排。
第一步:onLoad最先执行,接收URL参数并初始化页面数据。它只在页面首次加载时触发一次,适合发起网络请求、读取本地缓存、解析options.id等操作。
第二步:onShow紧随其后,在页面进入前台时触发。注意:onLoad之后立即触发,但若页面被缓存(如tabBar切换返回),onLoad不会再次执行,而onShow会——所以【不要在onLoad里写需要每次显示都刷新的逻辑】。
第三步:onReady最后触发,表示页面DOM已渲染完成。此时才能安全调用uni.createSelectorQuery()、获取节点尺寸、操作canvas等依赖真实DOM的操作。
页面隐藏与卸载:onHide和onUnload的适用边界
这两个钩子常被混淆,但职责完全不同。
onHide在页面被遮挡或切入后台时触发,比如用户点击TabBar切换到其他页面、按下Home键、弹出系统键盘、收到电话中断等场景。它不意味着页面销毁,只是暂时不可见。
onUnload仅在页面被彻底移除时触发,例如调用uni.navigateBack()返回上一页、uni.redirectTo()跳转覆盖当前页、或手动关闭tabBar页面。此时页面实例将被销毁,所有绑定的事件监听器、定时器、WebSocket连接必须在此清理。
【onUnload中未清除的定时器,会在下一次同名页面加载时继续运行,造成数据污染】
页面反复显示时的数据刷新策略
当用户频繁进出同一页面(如从列表页→详情页→返回列表页→再进详情页),onLoad只执行第一次,后续仅触发onShow。
方法一:把实时数据拉取逻辑统一放在onShow中。适用于天气、消息未读数、用户头像等需每次刷新的内容。
方法二:在onLoad中判断options来源,对分享链接、小程序码等特殊入口做差异化初始化;其余情况交由onShow兜底。
方法三:使用vuex或pinia全局状态管理,配合onShow触发commit更新视图,避免重复请求。
App.vue中应用级生命周期对页面的影响
onLaunch只在冷启动时执行一次,但onShow会在每次从前台恢复时触发。页面无法监听这两个钩子,但它们会影响页面行为。
例如:在App.vue的onShow中调用uni.reLaunch({url: '/pages/login/login'})强制跳转登录页,会导致当前所有页面被销毁并重定向——此时所有页面的onUnload都会被触发。
注意:onLaunch中直接navigateTo跳转,可能与pages.json首屏页面竞争渲染权,引发iOS端白屏。应加setTimeout(() => { uni.navigateTo(...) }, 100)延迟执行。










