# 组件生命周期

# 普通生命周期

当组件发生一些关键状态变化的时候，如被添加到页面中、从页面中移除等，会触发对应的生命周期回调函数。

其中，最重要的生命周期是 attached。它表示组件实例被添加到页面内；对于页面根组件，它表示整个页面创建完成并即将被展示。

Definition 形式的生命周期回调函数：

export default Component({
  lifetimes: {
    // attached 生命周期回调函数
    attached() {
      // 添加到页面时触发
    },
  },

  // 传统写法（不推荐）
  attached() {
    // 添加到页面时触发
  },
})

Chaining 形式的生命周期回调函数：

export default Component()
  .lifetimes('attached', function () {
    // ...
  })
  .register()

目前提供的生命周期回调函数如下表所示。

注意，ready 生命周期不推荐使用。因为它的回调触发可能会非常晚，并可能在组件被移除后才回调。绝大多数情况下，应使用 attached 代替。使用 ready 生命周期时，需要处理以下可能的情况：

• attached 触发后，ready 被触发；
• attached 未触发，仅 ready 被触发；
• attached 和 detached 依次触发后，ready 被触发。

除此以外，还有一些传统的 页面生命周期回调函数 ，可以在页面根组件中使用。 页面路由 文档中详细说明了部分生命周期的触发时序。

# 组件所在页面的生命周期

页面生命周期是一类特殊的生命周期。它在某个页面上触发时，会自动广播给所有页面内的所有组件。

注意：自定义 tabBar 的 pageLifetime 不会触发。

Definition 形式的组件所在页面生命周期回调函数：

Component({
  pageLifetimes: {
    show: function () {
      // 页面被展示时触发
    },
  },
})

Chaining 形式的组件所在页面生命周期回调函数：

Component()
  .pageLifetime('show', function () {
    // 页面被展示时触发
  })
  .register()