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