diff --git a/en/application-dev/reference/arkui-js/js-components-custom-lifecycle.md b/en/application-dev/reference/arkui-js/js-components-custom-lifecycle.md index fcadfdd427267b239e3f8660a7eca2b3bece1119..efaf962b6d2be3e3cc36afda214a5cbcff31ec40 100644 --- a/en/application-dev/reference/arkui-js/js-components-custom-lifecycle.md +++ b/en/application-dev/reference/arkui-js/js-components-custom-lifecycle.md @@ -1,97 +1,34 @@ -# Lifecycle Definition +# Lifecycle Definition ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version. -We 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. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attribute

-

Type

-

Description

-

Called When

-

onInit

-

Function

-

Custom component initialization

-

Triggered once, when a custom component is created.

-

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.

-

onLayoutReady

-

Function

-

Component layout completion

-

Triggered when layout calculation, including content size and position adjustment, is complete for a custom component.

-

onDetached

-

Function

-

Custom component removal

-

Triggered when a custom component is removed. It is usually used to stop animation or asynchronous logic execution.

-

onDestroy

-

Function

-

Custom component destruction

-

Triggered when a custom component is destroyed. It is usually used to release resources.

-

onPageShow

-

Function

-

Page display of a custom component

-

Triggered when the page where a custom component is located is displayed.

-

onPageHide

-

Function

-

Page hiding of a custom component

-

Triggered when the page where a custom component is located is hidden.

-
+We provide a range of lifecycle callbacks 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. -## Example -``` +| 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 **\** 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 removal | The custom component is removed. 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 + +```html
{{value}}
``` -``` +```js //comp.js export default { data: { @@ -106,12 +43,11 @@ export default { onDetached() { this.value = "" }, - onPageShow() { + onShow() { console.log ("Page displayed.") }, - onPageHide() { + onHide() { console.log ("Page hidden.") } } ``` -