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博客