1# 生命周期定义 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @mayaolll--> 5<!--Designer: @jiangdayuan--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 11> 从API Version 5 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 12 13 14我们为自定义组件提供了一系列生命周期回调方法，便于开发者管理自定义组件的内部逻辑。生命周期主要包括：onInit，onAttached，onDetached，onLayoutReady，onDestroy，onShow和onHide。下面我们依次介绍一下各个生命周期回调的时机。 15 16 17| 属性 | 类型 | 描述 | 触发时机 | 18| ------------- | -------- | ------------------ | ------------------------------------------------------------ | 19| onInit | Function | 初始化自定义组件 | 自定义组件初始化生命周期回调，当自定义组件创建时，触发该回调，主要用于自定义组件中必须使用的数据初始化，该回调只会触发一次调用。 | 20| onAttached | Function | 自定义组件装载 | 自定义组件被创建后，加入到Page组件树时，触发该回调，该回调触发时，表示组件将被进行显示，该生命周期可用于初始化显示相关数据，通常用于加载图片资源、开始执行动画等场景。 | 21| onLayoutReady | Function | 自定义组件布局完成 | 自定义组件插入Page组件树后，将会对自定义组件进行布局计算，调整其内容元素尺寸与位置，当布局计算结束后触发该回调。 | 22| onDetached | Function | 自定义组件卸载 | 自定义组件卸载时，触发该回调，常用于停止动画或异步逻辑停止执行的场景。 | 23| onDestroy | Function | 自定义组件销毁 | 自定义组件销毁时，触发该回调，常用于资源释放。 | 24| onShow | Function | 自定义组件Page显示 | 自定义组件所在Page显示后，触发该回调。 | 25| onHide | Function | 自定义组件Page隐藏 | 自定义组件所在Page隐藏后，触发该回调。 | 26 27 28## 示例 29 30```html 31<!-- comp.hml --> 32<div class="item"> 33 <text class="text-style">{{ value }}</text> 34</div> 35``` 36 37```js 38//comp.js 39export default { 40 data: { 41 value: "组件创建" 42 }, 43 onInit() { 44 console.log("组件创建") 45 }, 46 onAttached() { 47 this.value = "组件挂载", 48 console.log("组件挂载") 49 }, 50 onShow() { 51 console.log("Page显示") 52 }, 53 onHide() { 54 console.log("Page隐藏") 55 } 56} 57``` 58