---
title: Component Lifecycle
---


The lifecycle of a component refers to some functions provided by the component itself. These functions are automatically triggered at specified time points or in case of some specified framework events.

The most important lifecycles are `created`, `attached`, and `detached`. They apply to the most important time points in the lifecycle 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 moved to the page node tree, the `attached` lifecycle is triggered. In this case, `this.data` has been initialized to the current value of the component. In this useful lifecycle, most initialization work can be completed.
- After the component leaves the page node tree, the `detached` lifecycle is triggered. If the component is still in the page node tree when you exit a page, the `detached` lifecycle is triggered.

## How to define lifecycle

You can define lifecycle methods in the `lifetimes` field of the `Component` constructor.

**Sample code:**


```js
Component({
  lifetimes: {
    attached: function () {
      // Executed when a component instance is added to the page node tree
    },
    detached: function () {
      // Executed when a component instance is removed from the page node tree
    },
  },
  // ...
});
```

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

The following table lists all the available lifecycles.

| Lifecycle | Parameter | Description | 
| -------- | ---- | ---------------------------------- |
| created | None | Executed when a component instance is created. |
| attached | None | Executed when a component instance is added to the page node tree. |
| detached | None | Executed when a component instance is removed from the page node tree. |
| ready | None | Executed when the component layout is completed in the view layer. |

## Component page lifecycle

Some special lifecycles are not strongly associated with components, but must sometimes be perceived by components for internal processing. These lifecycles are called **component page lifecycles** and defined in the `pageLifetimes` definition field. The following table lists the available component page lifecycles:

| Lifecycle | Parameter | Description | Minimum version |
| -------- | ---- | -------------------------- | -------- |
| show | None | Executed when the component's page is shown. |  /        |
| hide | None | Executed when the component's page is hidden. |    /      |
| resize | None | Executed when the component's page is resized. | 2.6.2 |

**Sample code:**


```js
Component({
  pageLifetimes: {
    show: function () {
      // The page is shown
    },
    hide: function () {
      // The page is hidden
    },
    resize: function () {
      // The page is resized
    },
  },
});
```