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