当前位置:   article > 正文

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

微信小程序组件生命周期

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

一、组件生命周期

组件生命周期是组件自身的一些函数:
  • 组件实例刚被创建好,执行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() {
    // 在组件实例被从页面节点树移除时执行
  },
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

记一下,上面有四个打印的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) {
      // 页面尺寸变化
    }
  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

这一次有两个打印的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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
1、页面进入时的打印顺序
子组件 ———————— created
子组件 ———————— attached
页面   ———————— onLoad
子组件 ———————— pageLifetimes —————— show
页面   ———————— onShow
子组件 ———————— ready
页面   ———————— onReady
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
2、页面跳转 或 点击胶囊退出 时
子组件 ———————— pageLifetimes —————— hide
页面   ———————— onHide
  • 1
  • 2
3、页面回退时
子组件 ———————— pageLifetimes —————— show
页面   ———————— onShow
  • 1
  • 2
4、事件触发 Page 中 的 onShow
页面   ———————— onShow
  • 1
5、事件触发 Page 中 的 onLoad
页面   ———————— onLoad
  • 1
以上顺序可以看出:
  • 小程序在挂载、初始化的时候,是从内到外(从组件到page),在卸载的时候也是从内到外
  • 页面回退时,可以触发 pageLifetimes 的 show,这个特性可用来更新组件
  • 用事件触发 Page 的 onShow、onLoad,组件生命周期(lifetimes)、组件中所在页面的生命周期(pageLifetimes)不会被再次调用,所以【Page想通过method调用onShow、onLoad后】 与 【组件内部做生命周期的联动】是不行滴,要老老实实走组件通信了

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/88212
推荐阅读
相关标签
  

闽ICP备14008679号