小程序和页面生命周期详解
目录
小程序和页面生命周期详解
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等）是小程序特有的。