harmony 鸿蒙Lifecycle Definition
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.")
}
}
你可能感兴趣的鸿蒙文章
harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm
0
赞
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦