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

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

一、组件生命周期

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

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

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