小程序的四种生命周期函数
目录- 生命周期是指一个对象从创建→运行→销毁的整个阶段
- 生命周期函数是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行。生命周期函数允许程序员在特定的时间点,执行某些特定的操作
1. 应用的生命周期函数
-
特指小程序从启动→运行→销毁的过程
-
小程序的应用生命周期函数需要在app.js中声明
生命周期函数 描述说明 onLaunch 小程序初始化完成时,执行此函数,全局只触发一次 onShow 小程序启动,或从后台进入前台显示时触发 onHide 小程序从前台进入后台时触发
2. 页面的生命周期函数
-
特指小程序中,每个页面的加载→渲染→销毁的过程
-
小程序的页面生命周期函数需要在页面的.js文件中声明
生命周期函数 描述说明 onLoad 监听页面加载,一个页面只加载一次 onShow 监听页面显示 onReady 监听页面初次渲染完成,一个页面只调用一次 onHide 监听页面隐藏 onUnload 监听页面卸载,一个页面只调用一次
3. 组件的生命周期函数
-
小程序的组件生命周期函数需要在组件的.js文件中声明
生命周期函数 描述说明 created 在组件实例刚刚被创建时执行 attached 在组件实例进入页面节点树时执行 ready 在组件在视图层布局完成后执行 moved 在组件实例被移动到节点树另一个位置时执行 detached 在组件实例被从页面节点树移除时执行 error 每当组件方法抛出错误时执行 -
三个主要生命周期
- 组件实例刚被创建好时,created生命周期函数会被触发
- 此时还不能调用setData
- 在这个生命周期函数中,通常只用于给组件的this添加一些自定义的属性字段
- 在组件完全初始化完毕。进入页面节点树后,attached生命周期函数会被触发
- 此时,this.data已被初始化完毕
- 在这个生命周期函数中,绝大多数初始化的工作可以在这个时机进行
- 在组件离开页面节点树后,detached生命周期函数会被触发
- 退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
- 此时适合做一些清理性质的工作
- 组件实例刚被创建好时,created生命周期函数会被触发
-
定义方式
生命周期函数需要声明在lifetimes字段内
Component({ lifetimes:{ attached(){}, detached(){} } })
4. 组件所在页面的生命周期函数
-
有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期
-
小程序的组件生命周期函数需要在组件的.js文件中声明
生命周期函数 描述说明 show 组件所在的页面被展示时执行 hide 组件所在的页面被隐藏时执行 resize 组件所在的页面尺寸变化时执行 -
定义方式
Component({ pageLifetimes:{ show:function(){}, hide:function(){}, resize:function(size){} } })