tencent cloud

Feedback

Component Lifecycle

Last updated: 2024-03-04 23:14:22

    Primary Lifecycle of Components

    The lifecycle of a component refers to its inherent functions, which are automatically triggered at specific time points or upon encountering certain framework events.
    The most crucial stages in the lifecycle are created, attached, detached, encompassing the key moments in a component instance's life cycle.
    Upon the initial creation of a component instance, the 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.
    Once the component is fully initialized and enters the page node tree, the 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.
    Upon the component's departure from the page node tree, the detached lifecycle is triggered. When exiting a page, if the component remains within the page node tree, then detached will be activated.

    Define lifecycle methods

    Lifecycle methods can be directly defined within the first-level parameters of the Component constructor.
    The lifecycle of a component can also be declared within the lifetimes field (this is the recommended approach and has the highest priority).
    Sample Code
    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.
    },
    // ...
    })
    Lifecycle methods can also be written in the behaviors field, without overlapping with similarly named lifecycles in other behaviors.
    Note:
    If a component directly or indirectly references the same behavior multiple times, the lifecycle function within this behavior will only be executed once within a reference timing.
    The complete set of available lifecycles is illustrated in the following table:
    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.

    The lifecycle of the page where the component resides.

    There are also some special lifecycles that are not strongly associated with the component, but sometimes the component needs to be informed for internal handling. Such lifecycles are referred to as "the lifecycle of the page where the component resides," and are defined in the 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.
    Sample Code
    Component({
    pageLifetimes: {
    show() {
    // The page is displayed
    },
    hide() {
    // The page is hidden
    },
    resize(size) {
    // Page size changes
    }
    }
    })
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support