Lifecycle Definition

NOTE

This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.

A 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.

Attribute Type Description Invoked When
onInit Function Custom component initialization The custom component is created. This callback is invoked once.
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.
onLayoutReady Function Component layout completion Layout calculation, including content size and position adjustment, is complete for the custom component.
onDetached Function Custom component detachment The custom component is detached. It is usually used to stop animation or asynchronous logic execution.
onDestroy Function Custom component destruction The custom component is destroyed. It is usually used to release resources.
onShow Function Page display of a custom component The page where the custom component is located is displayed.
onHide Function Page hiding of a custom component The page where the custom component is located is hidden.

Example

<!-- comp.hml -->
<div class="item">  
   <text class="text-style">{{ value }}</text>  
</div>
//comp.js
export default {
  data: {
    value: "Create a component."
  },
  onInit() {
    console.log("Component created.")
  },
  onAttached() {
    this.value = "Load the component."
    console.log ("Component loaded.")
  },
  onShow() {
    console.log ("Page displayed.")
  },
  onHide() {
    console.log ("Page hidden.")
  }
}