微信小程序生命周期

• 创建阶段：created → attached → ready
• 运行阶段：show/hide/resize（页面级）
• 销毁阶段：detached
• 特殊场景：moved（节点位置变化）

一、组件生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

• 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

1、定义生命周期方法

生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）

2、示例

Component({
  lifetimes: {
    created: function() {
      // 此时组件实例刚刚被创建好，还不能调用 setData
    },
    attached: function() {
      // 在组件实例进入页面节点树时执行
      // 此时组件完全初始化完毕，进入页面节点树后，绝大多数初始化工作可在这时进行（例如获取数据的操作）
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // ...
  },
  detached: function() {
    // ...
  },
  // ...
})

在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。

可用的全部生命周期如下：

生命周期	参数	描述	最低版本
created	无	在组件实例刚刚被创建时执行	1.6.3
attached	无	在组件实例进入页面节点树时执行	1.6.3
ready	无	在组件在视图层布局完成后执行	1.6.3
moved	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
detached	无	在组件实例被从页面节点树移除时执行	1.6.3
error	Object Error	每当组件方法抛出错误时执行	2.4.1

三、组件所在页面的生命周期

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：

生命周期	参数	描述	最低版本
show	无	组件所在的页面被展示时执行	2.2.3
hide	无	组件所在的页面被隐藏时执行	2.2.3
resize	Object Size	组件所在的页面尺寸变化时执行	2.4.0

注意 :::

因自定义tabBar采用position: fixed脱离节点树流转，其 pageLifetimes 不会触发。如需监听页面显示状态，可通过全局事件（wx.onAppShow）或页面路由事件模拟。

1、示例

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
      // 此时适合恢复轮播图自动播放、重新加载时效性数据
      this.setData({ isVisible: true })
    },
    hide: function() {
      // 页面被隐藏
      // 此时适合暂停 WebGL 渲染、停止音频播放
      this.setData({ isVisible: false })
    },
    resize: function(size) {
      // 页面尺寸变化
      // 此时响应屏幕旋转时调整布局
      this.updateCanvasSize(windowWidth)
    }
  }
})