created
, attached
, detached
, encompassing the key moments in a component instance's life cycle.created
lifecycle is triggered. At this point, the component data this.data
is the data data
defined in the Component
constructor. At this stage, setData
cannot yet be invoked. Typically, this lifecycle should only be used to add some custom attribute fields to the component this.attached
lifecycle is triggered. At this point, this.data
has been initialized to the current value of the component. This lifecycle stage is highly useful, as the majority of initialization tasks can be performed within it.detached
lifecycle is triggered. When exiting a page, if the component remains within the page node tree, then detached
will be activated.Component
constructor.lifetimes
field (this is the recommended approach and has the highest priority).Component({lifetimes: {attached() {// Executed when the component instance enters the page node tree.},detached() {// Executed when the component instance is removed from the page node tree.},},// Below is the traditional method of definition.attached() {// Executed when the component instance enters the page node tree.},detached() {// Executed when the component instance is removed from the page node tree.},// ...})
behaviors
field, without overlapping with similarly named lifecycles in other behaviors
.behavior
multiple times, the lifecycle function within this behavior
will only be executed once within a reference timing.Lifecycle | Parameter | Description |
created | - | Executed when the component instance has just been created. |
attached | - | Executed when the component instance enters the page node tree. |
ready | - | Executed after the component's layout has been completed in the view layer. |
moved | - | Executed when the component instance is moved to another location in the node tree. |
detached | - | Executed when the component instance is removed from the page node tree. |
error | Object Error | Executed whenever a component method throws an error. |
pageLifetimes
definition section. The available lifecycles include:Lifecycle | Parameter | Description |
show | - | Executed when the page containing the component is displayed. |
hide | - | Executed when the page containing the component is hidden. |
resize | Object Size | Executed when the size of the page containing the component changes. |
Component({pageLifetimes: {show() {// The page is displayed},hide() {// The page is hidden},resize(size) {// Page size changes}}})
Was this page helpful?