Table of contents
1. The life cycle of a component is:
2. Define the life cycle of components
3. The life cycle of the page where the component is located
1. Component life cycle
Component life cycle refers to some functions of the component itself, which are automatically triggered at special time points or when some special framework events are encountered.
1. The life cycle of a component is:
| life cycle | parameter | describe | minimum version |
|---|---|---|---|
| created | none | Executed when the component instance has just been created | 1.6.3 |
| attached | none | Executed when the component instance enters the page node tree | 1.6.3 |
| ready | none | Executed after the component has finished laying out the view | 1.6.3 |
| moved | none | Executed when a component instance is moved to another location in the node tree | 1.6.3 |
| detached | none | Executed when a component instance is removed from the page node tree | 1.6.3 |
| error | Object Error | Executed whenever a component method throws an error | 2.4.1 |
2. Define the life cycle of components
(1) Put it in the lifetimes function. (high priority)
(2) There is no lifetime function, which is directly defined in the first-level parameter of the Component constructor.
2. Page life cycle
1. Page life cycle function
| Attributes | type | Defaults | required | illustrate |
|---|---|---|---|---|
| onLoad | function | none | no | Triggered when the page is loaded |
| onReady | function | none | no | Triggered when the page is rendered for the first time |
| onShow | function | none | no | Triggered when the page is finished displaying |
| onHide | function | none | no | Triggered when the page is hidden |
| onUpload | function | none | no | Triggered when the page is unloaded |
| onPullDownRefresh | function | none | no | Listen to the user's pull-down action |
| onReachBottom | function | none | no | Handling function of page bottoming event |
| onShareAppMessage | function | none | no | The event triggered by the user clicking share in the upper right corner |
The execution order of page life cycle and component life cycle:
Component--execute the page when the component instance enters the page node tree---monitor page loading component--the page is displayed page---monitor page display page---monitor the completion of the first rendering of the page;
The difference between component life cycle and page life cycle
The page life cycle is the beginning and end of the cycle when the applet is used and closed. It is used by the entry file. From the structural point of view of the component life cycle, all WeChat pages are stored in the pages folder, and the page code Initial data, lifecycle callbacks, event handlers, etc. are specified in
3. The life cycle of the page where the component is located
1. Life cycle function
| life cycle | parameter | describe | minimum version |
|---|---|---|---|
| show | none | Executed when the page where the component is located is displayed | 2.2.3 |
| hide | none | Executed when the page where the component is located is hidden | 2.2.3 |
| resize | Object Size | Executed when the size of the page where the component is located changes | 2.4.0 |