1# Lifecycle
2
3
4## Application lifecycle
5
6You can define the following application lifecycle methods in the **app.js** file.
7
8| Attribute     | Type      | Description    | Called When          |
9| --------- | ---------- | -------- | ------------------ |
10| onCreate  | () => void | Listens for application creation.| The application is created.|
11| onDestroy | () => void | Listens for application destruction.| The application exits.|
12
13## Page Lifecycle
14
15You can define the following page lifecycle functions in the **.js** file of the page.
16
17> **NOTE**
18>
19> To avoid affecting the page switching performance, do not perform complex, time-consuming operations in a lifecycle function.
20
21| Attribute     | Type      | Description        | Called When                              |
22| --------- | ---------- | ------------ | -------------------------------------- |
23| onInit    | () => void | Listens for page initialization.  | Page initialization is complete. This function is called only once in the page lifecycle.|
24| onReady   | () => void | Listens for page creation.| A page is created. This function is called only once in the page lifecycle.      |
25| onShow    | () => void | Listens for page display.    | The page is displayed.                      |
26| onHide    | () => void | Listens for page hiding.    | The page is hidden.                      |
27| onDestroy | () => void | Listens for page destruction.    | The page is destroyed.                      |
28
29The lifecycle functions of page A are called in the following sequence:
30
31- Open page A: Call onInit(), onReady(), and onShow() in sequence.
32- Open page B on page A: onHide() -> onDestroy()
33- Go back to page A from page B: onInit() -> onReady() -> onShow()
34- Exit page A: onHide() -> onDestroy()
35- Hide page A: onHide()
36- Show background page A on the foreground: onShow()
37
38![img](figures/lifecycle.png)
39