uni-app生命周期

uni-app的生命周期包括:应用生命周期、页面生命周期、组件生命周期

一、应用生命周期(只能在App.vue文件中监听)

函数 说明
onLaunch 初始化完成时触发(全局只触发一次)
onShow 启动时或从后台进入前台显示
onHide 从前台进入后台
onError 报错时触发
onPageNotFound 页面不存在监听函数

在App.vue文件中打印


在控制台输出可以看到执行顺序
uni-app生命周期_第1张图片

二、页面声明周期

函数 说明
onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object
onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新
onReachBottom 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体官方文档注意事项
onPageScroll 监听页面滚动,参数为Object
onShareAppMessage 用户点击右上角分享
onShareTimeline 监听用户点击右上角转发到朋友圈
onAddToFavorites 监听用户点击右上角收藏

更多页面生命周期细节,详见官方文档

在page页面中打印
uni-app生命周期_第2张图片
在控制台输出可以看到执行顺序

uni-app生命周期_第3张图片

三、组件生命周期(同Vue组件生命周期)

函数 说明
beforeCreate 实例初始化之前调用
created 创建完成后立即调用
beforeMount 挂载前调用
mounted 挂载后调用
beforeUpdate 数据更新时调用
updated 数据更新重新渲染
beforeDestroy 实例销毁之前调用
destroyed 实例销毁之后调用

H5和微信小程序的生命周期函数调用顺序不一致

H5

page beforeCreate
page onLoad
page onShow
page created
page beforeMount

component beforeCreate
component created
component beforeMount
component mounted

page onReady
page mounted

微信小程序

page beforeCreate
page created
page beforeMount

component beforeCreate
component created
component beforeMount

page onLoad
page onShow

component mounted

page mounted
page onReady

一般情况下,主要使用的周期函数如下,他们的执行顺序是固定的

page onLoad

component mounted

page mounted

测试代码

页面








组件 components/TestComponent.vue








你可能感兴趣的:(uni-app,前端,javascript)