# Component life cycle

Component life cycle refers to functions of the component itself that are automatically triggered at a particular point in time or when they encounter some particular framework event.

Among them, the most important life cycle iscreated``attached``detached，Contains the primary time point of a component instance lifecycle.

• When the component instance is just created, thecreatedlifecycle is triggered.At this point, the component datathis.datais the data defined in the Componentconstructor`` data。 setDatacannot be called at this time. Normally, this lifecycle should only be used to add custom property fields tothis.
• After the component is fully initialized and enters the page node tree, theattachedlifecycle is triggered.At this point,this.datahas been initially converted to the current value of the component.This lifecycle is useful because the vast majority of initialization work can be done at this time.
• After the component leaves the page node tree, thedetachedlifecycle is triggered.When exiting a page,detachedis triggered if the component is still in the page node tree.

# Define life cycle approach

The life-cycle method can be defined directly in the first level parameter of theComponentconstructor.

Since the Weixin Mini Program base library version {% version ('2.3')}, the life cycle of a component can also be declared in thelifetimesfield (this is the recommended way, which has the highest priority).

# Code examples

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

You can also write life cycle methods in behaviors without overriding the same life cycle in other behaviors. Note, however, that if a component refers directly or indirectly to the same behavior multiple times, the periodic function in the behavior will be executed only once in a single execution time.

The full life cycle available is shown in the table below.

1. When attachedis triggered,readyis triggered
2. Attachednot triggered,readytriggered
3. When attachedanddetachedare triggered in turn,readyare triggered

# Life cycle of the page where the component is located

There are also special life cycles that are not strongly related to the component, but sometimes the component needs to be known for internal processing.Such a lifecycle is called the "lifecycle of the page on which the component resides," and is defined in thepageLifetimesdefinition section.Among the available life cycles are:

Note: Custom tabBar's pageLifetime will not trigger.

# Code examples

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