Lifecycle hooks #

There are several lifecycle hooks that you can provide when defining a component.

The automatic handling of subscription/unsubscription happens when stores and event bus exists on a component. This prevents events or callbacks from triggering when a component disconnects and reconnects to the DOM.

created function #

The created hook will be invoked when the component has been created and before it is connected to the DOM.

{
created () {
// do something when the component is created!
}
}

mounted function #

The mounted hook will be invoked when the component has mounted in the DOM.

This may trigger before the components contents have been fully rendered.

This is triggered by the custom element connectedCallback lifecycle callback.

{
mounted () {
// do something when the component is mounted!
}
}

updated function #

The updated hook will be invoked each time the component state changes.

It is also invoked when the component has been moved or is reconnected to the DOM.
This is triggered by the custom element connectedCallback lifecycle callback.

The component's DOM will have updated when this hook runs and may trigger before the components contents have been fully rendered.

{
updated () {
// do something when the component is updated!
}
}

removed function #

The removed hook will be invoked each time the component has been disconnected from the document's DOM.
This is triggered by the custom element disconnectedCallback lifecycle callback.

{
removed () {
// do something when the component is removed!
}
}