自定义组件⑥组件的生命周期-微信小程序开发(二十三)
1. 组件全部的生命周期函数
小程序组件可用的全部生命周期如下表所示:
2. 组件主要的生命周期函数
在小程序组件中,最重要的生命周期函数有 3 个,分别是 created、attached、detached。它们各自的特点
如下:
① 组件实例刚被创建好的时候,created 生命周期函数会被触发
⚫ 此时还不能调用 setData
⚫ 通常在这个生命周期函数中,只应该用于给组件的 this 添加一些自定义的属性字段
② 在组件完全初始化完毕、进入页面节点树后, attached 生命周期函数会被触发
⚫ 此时, this.data 已被初始化完毕
⚫ 这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
③ 在组件离开页面节点树后, detached 生命周期函数会被触发
⚫ 退出一个页面时,会触发页面内每个自定义组件的 detached 生命周期函数
⚫ 此时适合做一些清理性质的工作
3. lifetimes 节点
在小程序组件中,生命周期函数可以直接定义在 Component 构造器的第一级参数中,可以在 lifetimes 字段
内进行声明(这是推荐的方式,其优先级最高)。示例代码如下:
Component({
//推荐用法
lifetimes:{
attached(){}, //在组件实例进入页面节点树时执行
detached(){} //在组件实例被从页面节点树移除时执行
},
//以下是旧式的定义方式
attached(){}, //在组件实例进入页面节点树时执行
detached(){} //在组件实例被从页面节点树移除时执行
})
组件所在页面的生命周期
1. 什么是组件所在页面的生命周期
有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期。
例如:每当触发页面的 show 生命周期函数的时候,我们希望能够重新生成一个随机的 RGB 颜色值。
在自定义组件中,组件所在页面的生命周期函数有如下 3 个,分别是:
2. pageLifetimes 节点
组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中,示例代码如下:
Component({
pageLifetimes:{
show:function(){}, //页面被展示
hide:function(){}, //页面被隐藏
resize:function(size){} //页面尺寸变化
}
})
3. 生成随机的 RGB 颜色值
Component({
pageLifetimes:{
//组件所在页面被展示时,立即调用 _randomColor 生成随机颜色值
show:function(){
this._randomColor()
},
},
methods: {
//生成随机RGB颜色的方法,非事件处理函数,建议以 _ 开头
_randomColor(){
this.setData({ //为data里面的 _rgb 纯数据字段重新赋值
_rgb:{
r:Math.floor(Math.random()*256),
g:Math.floor(Math.random()*256),
b:Math.floor(Math.random()*256)
}
})
}
}
})