小程序和页面生命周期详解

UniApp 是一个基于 Vue.js 的跨平台开发框架，允许开发者使用一套代码构建多端应用（如小程序、H5、App 等）。UniApp 的生命周期结合了 Vue.js 的生命周期和各个平台（如微信小程序、App 等）的生命周期。以下是 UniApp 的主要生命周期钩子：

应用生命周期

应用生命周期是指整个应用从启动到销毁的过程，适用于 App 平台。

生命周期	说明
onLaunch	当应用初始化时触发，全局只触发一次。
onShow	当应用启动，或从后台进入前台时触发。
onHide	当应用从前台进入后台时触发。
onError	当应用发生脚本错误或 API 调用失败时触发。

注意 

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

页面生命周期：

页面生命周期是指单个页面从创建到销毁的过程

生命周期	说明
onLoad	页面加载时触发 (一个页面只会调用一次)
onShow	每次打开页面都会调用一次
onReady	页面初次渲染完成时触发(一个页面只会调用一次) 代表页面已经准备妥当，可以和视图层进行交互
onHide	页面隐藏/切入后台时触发（当navigateTo或底部tab切换时调用。）
onUpload	页面卸载时触发（当redirectTo或navigateBack的时候调用。）

组件生命周期：

UniApp 的组件生命周期与 Vue.js 的生命周期一致。

生命周期	说明
beforeCreate	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created	在实例创建完成后被立即调用，此时已完成数据观测，但尚未挂载 DOM
beforeMount	组件挂载到 DOM 之前。
mounted	组件挂载到 DOM 之后。
beforeUpdate	组件数据更新之前。
updated	组件数据更新之后。
beforeDestroy	组件实例销毁之前。
destroyed	组件实例销毁之后。

其它生命周期

 

生命周期	说明
onPullDownRefresh	页面下拉刷新时触发。
onReachBottom	页面上拉触底时触发
onShareAppMessage	用户点击右上角分享时触发
onPageScroll	页面滚动时触发
onResize	页面尺寸改变时触发

页面与组件生命周期执行顺序

• 页面加载时：onLoad -> onShow -> onReady

• 页面隐藏时：onHide

• 页面卸载时：onUnload

• 组件加载时：beforeCreate -> created -> beforeMount -> mounted

• 组件更新时：beforeUpdate -> updated

• 组件销毁时：beforeDestroy -> destroyed

注意：

• 应用生命周期 仅在 App 平台有效，小程序和 H5 平台不支持。

• 页面生命周期 和 组件生命周期 在所有平台都支持，但不同平台可能会有一些差异。

• 在小程序平台，部分生命周期（如 onPullDownRefresh、onReachBottom 等）是小程序特有的。

vue生命周期+微信小程序生命周期详解_小程序生命周期和vue生命周期-CSDN博客