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

一、组件生命周期

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

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