当前位置: 首页 > news >正文

了解uni-app的生命周期(应用,页面生命周期)执行顺序

应用生命周期

定义在app.vue中

生命周期函数名说明
onLaunch当uni-app 初始化完成时触发(全局只触发一次)
onShow当 uni-app 启动,或从后台进入前台显示(多次触发)
onHide当 uni-app 从前台进入后台(多次触发)
onUniNViewMessage对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯(出现代码异常,报错时触发)

注意:

  • 应用生命周期仅可在App.vue中监听,在其它页面监听无效。
  • onlaunch里进行页面跳转,如遇白屏报错,请参考 https://ask.dcloud.net.cn/article/35942

页面生命周期

定义在各个页面中

生命周期函数名说明
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)(单次触发)
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面(多次触发)
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发(单次触发)
onHide监听页面隐藏(多次触发)
onUnload监听页面卸载
onResize监听窗口尺寸变化
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新
onPageScroll监听原生标题栏按钮点击事件,参数为Object
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发

注意:

  • H5端onBackPress只能监听页面导航栏的返回按钮的点击事件,不能监听浏览器返回以及手机的返回

  • 页面生命周期仅在page页面有效,而单独封装的组件中【页面周期无效】,但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】

  • 推荐使用uni-app里面的onReady 代替 vue 里面的 mounted

  • 推荐使用uni-app里面的onLoad 代替 vue 里面的 created

onPageScroll 参数说明:

属性:scrollTop 类型:Number 说明 : 页面在垂直方向已滚动的距离(单位px)

生命周期函数执行顺序:

页面加载过程: 加载=》显示=》加载完成=》页面隐藏=》页面卸载 触发页面生命周期: onLoad:监听页面加载 =》
onShow:监听页面显示 =》 onReady:监听页面初次渲染完成 =》 onHide:监听页面隐藏 =》
onUnload:监听页面卸载

Page页面生命周期函数执行顺序
beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted

刷新数据后
beforeUpdate => updated

相关文章:

  • linux之程序包安装
  • Java开发程序,使用编辑器编写创建Java项目、类
  • uni-app中下拉刷新及上拉刷新的使用
  • 搭建本地api接口
  • 2016总结
  • vue,uni-app组件间的通讯(父子,兄弟组件间传值)
  • python学习笔记10(用户交互程序)
  • uni-app开发微信小程序封装异步请求
  • Python语法速览与机器学习开发环境搭建
  • uni-app在小程序,h5端,安卓端的打包发布
  • HashSet和HashMap的区别
  • Vue中的使用axios封装的全局拦截器
  • [Swift] Enum 好用, Enum 可以更易用
  • VUE中的全局时间过滤器(格式化时间)
  • Android ScrollView滑动事件和子控件点击事件冲突
  • 【391天】每日项目总结系列128(2018.03.03)
  • axios 和 cookie 的那些事
  • golang中接口赋值与方法集
  • HashMap剖析之内部结构
  • JavaScript-Array类型
  • JS创建对象模式及其对象原型链探究(一):Object模式
  • node入门
  • React-Native - 收藏集 - 掘金
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • Sublime Text 2/3 绑定Eclipse快捷键
  • vue和cordova项目整合打包,并实现vue调用android的相机的demo
  • 成为一名优秀的Developer的书单
  • 番外篇1:在Windows环境下安装JDK
  • 模仿 Go Sort 排序接口实现的自定义排序
  • 前端存储 - localStorage
  • 前端之Sass/Scss实战笔记
  • 实现菜单下拉伸展折叠效果demo
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 提醒我喝水chrome插件开发指南
  • 微信端页面使用-webkit-box和绝对定位时,元素上移的问题
  • 微信支付JSAPI,实测!终极方案
  • 我与Jetbrains的这些年
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • 数据可视化之下发图实践
  • ###项目技术发展史
  • #我与Java虚拟机的故事#连载06:收获颇多的经典之作
  • $redis-setphp_redis Set命令,php操作Redis Set函数介绍
  • (C语言)fread与fwrite详解
  • (Forward) Music Player: From UI Proposal to Code
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (第27天)Oracle 数据泵转换分区表
  • (二)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (附源码)springboot猪场管理系统 毕业设计 160901
  • (论文阅读22/100)Learning a Deep Compact Image Representation for Visual Tracking
  • (十六)一篇文章学会Java的常用API
  • (一)Spring Cloud 直击微服务作用、架构应用、hystrix降级
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转)Scala的“=”符号简介
  • (转)关于多人操作数据的处理策略
  • (转载)PyTorch代码规范最佳实践和样式指南