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

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

一、组件生命周期

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

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

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