组件生命周期
收藏
我的收藏

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

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

•

created：在组件实例进入页面节点树时，created 生命周期被触发，注意此时不能调用 setData 。通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

•

attached：在组件完全初始化完毕、进入页面节点树后，attached 生命周期被触发。此时，this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。

•

detached：在组件离开页面节点树后，detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

定义生命周期方法

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

组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

代码示例：

js复制
Component({
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下生命周期会被lifetimes对应生命周期覆盖
  attached: function () {
    // 在组件实例进入页面节点树时执行
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
});

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

可用的全部生命周期如下表所示。

生命周期	参数	描述
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件布局完成后执行
detached	无	在组件实例被从页面节点树移除时执行

组件所在页面的生命周期

基础库 2.41.0 开始支持本能力，低版本需做兼容处理

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

生命周期	参数	描述	最低版本
show	{showFrom: 10/0/undefined}	组件所在的页面被展示时执行，在页面 onShow 之前、页面中所有组件 attached 之后	2.41.0
hide	无	组件所在的页面被隐藏时执行	2.41.0
resize	Object Size	组件所在的页面尺寸变化时执行	2.41.0

show 方法参数

showFrom 字段指明当前页面的进入方式，参考以下说明。

showFrom值	说明
0	组件所在页面由后台切入前台
10	组件所在页面由 schema 拉起
undefined	组件所在页面从其他页面跳转进入

resize 方法参数

参数	类型	说明
windowHeight	number	可使用窗口高度
windowWidth	number	可使用窗口宽度
screenRatio	number	X 分屏大小，为 0-1 之间的数值
interactive	boolean	手势是否正在拖动分屏

代码示例

js复制
Component({
  pageLifetimes: {
    show: function ({ showFrom }) {
      // 页面被展示
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function () {
      // 页面尺寸变化
    },
  },
});