admin 管理员组

文章数量: 886993

uniapp的常用生命周期

uniapp的常用生命周期

  • 一、应用生命周期(App.vue文件)
  • 二、页面生命周期
  • 三、组件生命周期
  • 四、项目启动各个生命周期的执行顺序

只列举常用生命周期，详细生命周期请看官网
此文章吸收了其他多个文章的经验，从而自我总结的笔记

一、应用生命周期(App.vue文件)

生命周期名称触发时机
onLaunch当uni-app初始化完成时触发(全局只触发一次)
onShow当uni-app启动或从后台进入前台显示
onHide当uni-app从前台进入后台

二、页面生命周期

uni.navigateTo({url:'...'}) 保留当前页面，使用uni.navigateBack可以返回到原页面
uni.readirectTo({url:'...'}) 关闭当前页面，跳转到应用内的某个页面

生命周期名称触发时机
onLoad监听页面加载(适用于路由传参) 下级页面返回当前页面不会触发
onShow监听页面显示(下级页面返回露出当前页面时也会触发)
onReady监听页面初次渲染完成
onHide监听页面隐藏( 配合uni.navigateTo({…}) )触发
onUnload监听页面卸载：
（配合页面左上角的后退按钮）触发
（配合uni.readirectTo）触发

三、组件生命周期

生命周期名称触发时机
mounted组件挂载完毕
destroyed组件已经卸载完毕

四、项目启动各个生命周期的执行顺序

应用生命周期onLaunch ——> 应用生命周期onShow ——>
组件生命周期beforeCreate ——> 组件生命周期created ——>
页面生命周期onLoad ——> 页面生命周期onShow ——>
组件生命周期mounted ——> 页面生命周期onReady

当使用uni.navigateTo跳转页面时 ：
onHide ——> onLoad ——> onShow ——> onReady
当点击页面左上角返回按钮时：
onUnload ——> destroyed ——> onShow
当使用uni.readirectTo跳转页面时：
onUnload ——> destroyed ——> onLoad ——> onShow ——> onReady

本文标签： uniapp的常用生命周期

版权声明：本文标题：uniapp的常用生命周期 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732351868h1533308.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。