# Component Lifecycle

Component lifecycles refer to the functions in the component itself. These functions are automatically triggered at certain timepoints or when specific framework events occur.

The most important lifecycles are created, attached, and detached, which include the main time points in the entire lifecycle process of a component instance.

• When a component instance is created, the created lifecycle is triggered. In this case, the component data, this.data is defined as data in the Component constructor. You cannot call setData yet. Generally, this lifecycle should only be used to add custom property fields to the component this.
• After the component has been completely initialized and entered the page node tree, the attached lifecycle is triggered. In this case, this.data has been initialized to the current value of the component. This lifecycle is very useful, where most initialization work can be completed.
• After the component leaves the page node tree, the detached lifecycle is triggered. When you exit a page, if the component is still in the page node tree, detached is triggered.

# Defining Lifecycle Methods

Lifecycle methods can be directly defined in level-one parameters of the Component constructor.

From Mini Program base library 2.2.3 and later, component lifecycles can also be declared in the lifetimes field. We recommend this method as it has the highest priority.

Code example:

Component({
  lifetimes: {
    attached: function() {
      // Executed when the component instance enters the page node tree
    },
    detached: function() {
      // Executed when the component instance is removed from the page node tree
    },
  },
  // The older definition methods below can be used for compatibility with base library versions under 2.2.3
  attached: function() {
    // Executed when the component instance enters the page node tree
  },
  detached: function() {
    // Executed when the component instance is removed from the page node tree
  },
  // ...
})

You can also write lifecycle methods in behaviors, which will not be overwritten by lifecycles of the same name in other behaviors. Note that, if a component directly or indirectly references the same behavior multiple times, the lifecycle function in this behavior is only executed once during a single execution time.

All available lifecycles are listed below:

# Component Page Lifecycles

There are also some special lifecycles that are not strongly associated with components but must sometimes be known by components for internal processing. These lifecycles are called "component page lifecycles" and defined in the pageLifetimes definition field. The available component page lifecycles include:

Code example:

Component({
  pageLifetimes: {
    show: function() {
      // Page displayed
    },
    hide: function() {
      // Page hidden
    },
    resize: function(size) {
      // Page resized
    }
  }
})