1# Lifecycle Definition
2
3>  **NOTE**
4>
5>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
6
7
8A range of lifecycle callbacks are provided for custom components, including **onInit**, **onAttached**, **onDetached**, **onLayoutReady**, **onDestroy**, **onShow**, and **onHide**. You can use these callbacks to manage the internal logic of your custom components. The following describes the times when the lifecycle callbacks are invoked.
9
10
11| Attribute         | Type    | Description              | Invoked When                                                    |
12| ------------- | -------- | ------------------ | ------------------------------------------------------------ |
13| onInit        | Function | Custom component initialization  | The custom component is created. This callback is invoked once.|
14| onAttached    | Function | Custom component loading    | The custom component is added to the **Page** component tree. When this callback is invoked, related data can be displayed during the lifecycle in scenarios such as image loading and animation playback.|
15| onLayoutReady | Function | Component layout completion| Layout calculation, including content size and position adjustment, is complete for the custom component.|
16| onDetached    | Function | Custom component detachment    | The custom component is detached. It is usually used to stop animation or asynchronous logic execution. |
17| onDestroy     | Function | Custom component destruction    | The custom component is destroyed. It is usually used to release resources.              |
18| onShow        | Function | Page display of a custom component| The page where the custom component is located is displayed.                      |
19| onHide        | Function | Page hiding of a custom component| The page where the custom component is located is hidden.                      |
20
21
22## Example
23
24```html
25<!-- comp.hml -->
26<div class="item">
27   <text class="text-style">{{ value }}</text>
28</div>
29```
30
31```js
32//comp.js
33export default {
34  data: {
35    value: "Create a component."
36  },
37  onInit() {
38    console.log("Component created.")
39  },
40  onAttached() {
41    this.value = "Load the component."
42    console.log("Component loaded.")
43  },
44  onShow() {
45    console.log("Page displayed.")
46  },
47  onHide() {
48    console.log("Page hidden.")
49  }
50}
51```
52