探讨uniapp的生命周期问题

在uniapp中,生命周期函数分为应用生命周期函数、页面生命周期函数和组件生命周期函数.

1应用声明周期

应用生命周期函数只能在 App.vue 中监听有效,在其他页监听无效。

  • onLaunch:当uni-app 初始化完成时触发(全局只触发一次)
  • onShow:当 uni-app 启动,或从后台进入前台显示
  • onHide:当 uni-app 从前台进入后台
  • onError: 当 uni-app 报错时触发

2页面生命周期

  • onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
  • onShow 监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回当前页面
  • onReady 监听页面初次渲染完成,注意如果渲染速度快,会在页面进入动画完成前触发【页面初次渲染完成了,但是渲染完成了,你才发送请求获取数据,就太慢了。】
  • onHide 监听页面隐藏,通过tabbar切换页面也是隐藏而不是卸载
  • onUnload 监听页面卸载
  • onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新,前提开启下拉刷新。
    下拉刷新开启:pages.json 中全局配置,或者页面的style中配置或通过 uni.startPullDownRefresh()方法
    下拉刷新关闭:uni.stopPullDownRefresh()
  • onReachBottom:上拉加载,页面滚动到底部的事件,在事件中可以加载下一页数据
    在pages.json中的页面style中,通过onReachBottomDistance可以配置页面上拉触底事件触发距页面底部的距离,默认50px

2.1onLoad 监听页面加载

2.2onShow 监听页面显示

3uniapp常用生命周期执行顺序

主要讨论onLoad,onReady,onShow,beforeCreate,created,beforeMount,mounted七大生命周期。

java 复制代码
页面beforeCreate执行: undefined
页面onLoad执行: 100
页面onShow执行: 100
页面created执行: 100
页面beforeMount执行: 100
页面onReady执行: 100
页面mounted执行: 100
相关推荐
桔筐3 分钟前
Vue中DOM的data-*自定义属性(dataset)与Vue data响应式变量区别详解
前端·javascript·vue.js
damoluomu9 分钟前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html
小马过河R22 分钟前
EdgeOne深度解析:从原理、适用场景到COS接入的技术逻辑
java·开发语言·前端·spring·cos
ZoeLandia40 分钟前
TypeScript 04:类型断言与类型守卫
开发语言·前端·typescript
guzicheng199043 分钟前
webpack 安装笔记:全局 vs 本地,以及一个 PATH 环境变量的坑
前端·webpack
西索斯coding1 小时前
Claude Code 工具调用返回空怎么办?claude-opus-5.5 的 input_schema 校验踩坑记录与修复方案
服务器·前端·javascript·ai
疯狂敲代码的老刘1 小时前
MarvellousSuspender浏览器扩展:1.4K星开源标签页冻结神器,Chrome吃内存终结者的干净复活版
前端·chrome
码上上班1 小时前
shell 脚本知识点总结
前端·chrome
程序员Sunday1 小时前
Flex 和 Grid 有什么区别?一维布局、二维布局怎么选?
前端·css·面试
Jlzn88881 小时前
华南PACK线自动化率怎么统计才靠谱
前端·javascript·自动化