uni-app生命周期函数是资源管理、时机控制和跨端一致性的关键开关:onLaunch全局仅执行一次用于App初始化,onLoad每次进页触发用于页面数据请求;onShow页面级用于刷新列表,应用级用于检查网络;onReady确保视图渲染完成才操作DOM;onUnload彻底卸载页面时清理资源,onHide仅隐藏页面时不重置状态。

uni-app 的生命周期函数不是“选填项”,而是资源管理、时机控制和跨端一致性的关键开关——用错位置或混淆作用域,轻则数据错乱,重则内存泄漏。
onLaunch 和 onLoad 容易混用?看触发时机和作用域
onLaunch 只在 App.vue 中生效,且全局仅执行一次,典型场景是初始化 SDK、读取本地 token、设置全局拦截器。onLoad 则只在页面(pages/xxx.vue)中有效,每次进入该页面都会触发,适合请求页面专属数据、解析 URL 参数。
-
onLaunch里不能访问this.$route或页面级data,它没有路由上下文 -
onLoad接收的参数是页面跳转时传入的 query,例如uni.navigateTo({ url: 'pages/detail/detail?id=123' }),此时onLoad的第一个参数就是{ id: '123' } - App.vue 中写
onLoad不会报错,但完全不会执行——框架直接忽略
onShow / onHide 在页面和应用中同名但行为不同
页面级 onShow 和应用级 onShow 都表示“可见”,但触发条件完全不同:页面 onShow 在 tabBar 切换、navigateBack 返回、小程序后台切回前台等任何导致该页面重新显示的时刻都触发;而应用 onShow 仅当整个 App 从系统后台回到前台时才触发。
- 页面
onShow适合刷新列表、重置表单状态、恢复播放器 - 应用
onShow更适合检查网络状态、同步用户登录态、重连 WebSocket - 注意:iOS 微信小程序中,应用
onHide可能延迟触发,不要依赖它做即时清理(比如立即停播音频)
onReady 替代 mounted?必须确认渲染完成再操作 DOM
Vue 的 mounted 在组件挂载后即触发,但 uni-app 页面的 DOM 渲染可能尚未就绪(尤其在 nvue 或部分小程序平台),所以官方推荐用 onReady——它确保视图层已渲染完毕,可安全调用 uni.createSelectorQuery()、启动 Canvas 动画、获取节点尺寸。
-
onReady在页面中只触发一次,且一定晚于onLoad - 在
onReady中调用uni.createSelectorQuery().select('.my-box').boundingClientRect()才能拿到真实宽高;在mounted里大概率返回null - 如果用了 Composition API,
onReady仍需通过onReady(() => { ... })显式注册,不能写在setup()内部
onUnload 和 onHide 容易被当成“退出清理”的万能钩子
onUnload 表示页面彻底卸载(如 navigateTo 新页、关闭 tabBar 页面),此时页面实例销毁,适合取消请求、清除定时器、解绑事件监听;而 onHide 只是页面隐藏(如切换 tabBar、弹出 modal),页面实例仍在内存中,下次 onShow 会复用,不应在此释放关键状态。
- 在
onHide中调用this.timer && clearInterval(this.timer)是合理操作,但别清空this.listData——否则onShow时要重新拉取 -
onUnload中务必检查并取消未完成的uni.request,避免回调执行时this已销毁报错 - H5 平台下
onUnload不触发,需额外监听beforeunload事件做兜底
真正难处理的是多端差异:微信小程序的 onHide 精确,App 端可能因原生容器行为不一致而漏触发;nvue 页面的 onReady 时机又比 vue 页面更靠后。这些细节不会写在文档首页,但上线后立刻暴露。


















