uni-app生命生命周期

1,842 阅读2分钟

一、生命周期

1、应用生命周期

onLunch :当uni-app初始化完成时触发(全局只触发一次)

onShow:当uni-app启动,或从后台进入前台显示

onHide:当uni-app从前台进入后台

onError:当uni-app报错时触发

onUniNViewMessage:当页面发送数据监听

注意:应用生命周期只在app.vue中进行监听,其他页面奖金无效

2、页面生命周期

onLoad:监听页面加载,七参数未上个页面传递的数据,参数类型为object(用于页面传参)

onShow:监听页面显示,页面每次出现在屏幕上都触发,包括从夏季页面 返回当前页面

onReady:监听页面初次渲染完成,注意如果渲染速度快,会在页面进入动画之前触发

onHide:监听页面隐藏

onUnload:监听页面卸载

onResize:监听窗口尺寸

onPagescroll:监听页面滚动

onTabItemTap:点击tab时触发,参数为object

onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新

onReachBottom:页面滚动到底部的事件,常用于下拉下一页数据

onNavigationBarSearchInputChanged:监听原生标题搜索输入框的内容变化事件

onNavigationBarSearchInputConfirmed:监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的搜索按钮时触发

onNavigationBarSearchInputClicked:监听原生标题栏输入框点击事件

注意:onPagecrol 里面不要写交互复杂的js,比如频繁的修改页面,因为这个生命周期是在渲染层触发的,在非H5端,js是在逻辑层触发的,两层之间通讯是有损害的,

onTabItemTap 常用于点击当前tabitem,滚动或刷新当前页面,如果是点击不同的tabitem,一定会触发页面的切换

3、组件生命周期

beforeCreate :在实例初始化之前调用

created:在实例创建之后调用

beforeMount:在开始挂载之前开始被调用

mounted:挂载到实例上去之后被调用,(注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTick)

beforeUpdate:数据更新时调用,发生在虚拟dom打补丁之前(仅支持H5平台)

update:由于数据更改导致dom重新渲染和打补丁,在这之后会调用该钩子(仅支持H5平台)

beforeDestory:实例销毁之前调用,在这一步实例仍然完全可用

destroyed:vue实例销毁后调用,调用后,vue实例指示的所有东西都会解绑定,多有的事件监听器会被移除,所有的子实例也会被销毁

详情请参考uni-app官网:uniapp.dcloud.io/api/lifecyc…