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

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

一、组件生命周期

组件生命周期是组件自身的一些函数:
  • 组件实例刚被创建好,执行created,此时还不能调用setData
  • 在组件完全初始化完毕、进入页面节点树后,执行attached,this.data 已被初始化,绝大多数初始化工作可以在这个时机进行(这个生命周期可以做一些异步请求、数据更新
  • 在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。

微信小程序——组件生命周期_第1张图片

具体的写法:
  • 生命周期方法可以直接定义在 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 手动调用页面的 onShowonLoad方法,页面的生命周期会被执行,但是组件的相关生命周期组件所在页面的相关生命周期 都不会被再次执行!(可以往后面看打印的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后】 与 【组件内部做生命周期的联动】是不行滴,要老老实实走组件通信了

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

你可能感兴趣的:(微信小程序,小程序)