关于小程序:微信小程序组件生命周期

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

一、组件生命周期

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

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

欢送留言哦，一起摸索更多~