微信小程序——组件生命周期
smile1213 -查看微信小程序官网内容,请点击 小程序官方组件生命周期一、组件生命周期组件生命周期是组件自身的一些函数:组件
实例
刚被创建
好,执行created
,此时还不能调用setData
在组件完全初始化完毕
、进入页面节点树
后,执行attached
,this.data 已被初始化,绝大多数初始化工作可以在这个时机进行(这个生命周期可以做一些异步请求、数据更新
)在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。具体的写法:生命周期方法可以直接定义在 Component 构造器的第一级参数
中自小程序基础库版本 2.2.3 起,组件的的生命周期也可以在 lifetimes
字段内进行声明(这是推荐的方式,其优先级最高)Component({
lifetimes: {
created: function() {
// 在组件实例刚刚被创建时执行
console.log('子组件————————created')
},
attached: function() {
// 在组件实例进入页面节点树时执行
console.log('子组件————————attached')
},
ready: function() {
// 在组件在视图层布局完成后执行
console.log('子组件————————ready')
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
console.log('子组件————————detached')
},
},
// 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
})
记一下,上面有四个打印的log,后面我们一起综合看下执行顺序
二、组件所在页面的生命周期即在组件内部
,访问所在页面的生命周期
如果希望组件在 页面
onShow等
的时候,执行组件内部一些操作,就需要用到下面的生命周期
页面回退时
需要更新子组件中data,用这个 pageLifetimes show
就很棒棒了要注意一点,如果是在 method
手动调用页面的 onShow
或 onLoad
方法,页面的生命周期会被执行,但是组件的相关生命周期
、组件所在页面的相关生命周期
都不会被再次执行!(可以往后面看打印的log)Component({
// 组件所在页面的生命周期
pageLifetimes: {
show: function() {
console.log('子组件——————pageLifetimes——————show')
},
hide: function() {
console.log('子组件——————pageLifetimes——————hide')
},
resize: function(size) {
// 页面尺寸变化
}
}
})
这一次有两个打印的log,后面我们一起综合看下执行顺序
三、这么些个生命周期,执行顺序是怎样的?为了看得更清晰,我在page中也加了打印:
Page({
onLoad() {
console.log('页面————————onLoad')
},
onShow () {
console.log('页面————————onShow')
},
onReady () {
console.log('页面————————onReady')
},
onHide () {
console.log('页面————————onHide')
},
doShow () {
this.onShow()
},
doLoad () {
this.onLoad()
},
})
1、页面进入时的打印顺序子组件 ———————— created
子组件 ———————— attached
页面 ———————— onLoad
子组件 ———————— pageLifetimes —————— show
页面 ———————— onShow
子组件 ———————— ready
页面 ———————— onReady
2、页面跳转 或 点击胶囊退出 时子组件 ———————— pageLifetimes —————— hide
页面 ———————— onHide
3、页面回退时子组件 ———————— pageLifetimes —————— show
页面 ———————— onShow
4、事件触发 Page 中 的 onShow页面 ———————— onShow
5、事件触发 Page 中 的 onLoad页面 ———————— onLoad
以上顺序可以看出:小程序在挂载、初始化的时候,是从内到外
(从组件到page),在卸载的时候也是从内到外
的页面回退时,可以触发 pageLifetimes 的 show
,这个特性可用来更新组件用事件触发 Page 的 onShow、onLoad,组件生命周期(lifetimes)、组件中所在页面的生命周期(pageLifetimes)不会被再次调用,所以【Page想通过method调用onShow、onLoad后】 与 【组件内部做生命周期的联动】是不行滴,要老老实实走组件通信了欢迎留言哦,一起探索更多~
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。