微信小程序——组件生命周期

生命周期"/>

微信小程序——组件生命周期

查看微信小程序官网内容，请点击 小程序官方组件生命周期

一、组件生命周期

组件生命周期是组件自身的一些函数：

• 组件实例刚被创建好，执行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后】 与 【组件内部做生命周期的联动】是不行滴，要老老实实走组件通信了

欢迎留言哦，一起探索更多~