Component Lifecycle
The three phases are: mounted, updated, and unmounted.
Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.
Lifecycle Hooks
There are also other hooks which will be called at different stages of the instance's lifecycle, with the most commonly used being mounted, updated, and unmounted.
All lifecycle hooks are called with their this context pointing to the current active instance invoking it. Note this means you should avoid using arrow functions when declaring lifecycle hooks, as you won't be able to access the component instance via this if you do so.
beforeCreate: Called immediately when the instance is initialized, after props resolution, before processing other options such as data() or computed.
created: Called after the instance has finished processing all state-related options. When this hooks is called, the following have been set up: reactive data, computed properties, methods, and watchers. However, the mounting phase has not been started, and the $el property will not be available yet.
beforeMount: Called right before the component is to be mounted. When this hook is called, the component has finished setting up its reactive state, but no DOM nodes have been created yet. It is about to execute its DOM render effect for the first time. This hook is not called during server-side rendering.
mounted: Called after the component has been mounted.
A component is considered mounted after:
- All of its synchronous child components have been mounted (does not include async components or components inside <Suspense> trees).
- Its own DOM tree has been created and inserted into the parent container. Note it only guarantees that the component's DOM tree is in-document if the application's root container is also in-document.
This hook is typically used for performing side effects that need access to the component's rendered DOM, or for limiting DOM-related code to the client in a server-rendered application.
This hook is not called during server-side rendering.
beforeUpdate: Called right before the component is about to update its DOM tree due to a reactive state change.This hook can be used to access the DOM state before Vue updates the DOM. It is also safe to modify component state inside this hook. This hook is not called during server-side rendering.
updated: Called after the component has updated its DOM tree due to a reactive state change. A parent component's updated hook is called after that of its child components.
This hook is called after any DOM update of the component, which can be caused by different state changes. If you need to access the updated DOM after a specific state change, use nextTick() instead.
This hook is not called during server-side rendering.
beforeUnmount: Called right before a component instance is to be unmounted. When this hook is called, the component instance is still fully functional.
This hook is not called during server-side rendering.
unmounted: Called after the component has been unmounted.
A component is considered unmounted after:
- All of its child components have been unmounted.
- All of its associated reactive effects (render effect and computed / watchers created during setup()) have been stopped.
Use this hook to clean up manually created side effects such as timers, DOM event listeners or server connections.
This hook is not called during server-side rendering.
errorCaptured: Called when an error propagating from a descendent component has been captured.
Errors can be captured from the following sources:
- Component renders
- Event handlers
- Lifecycle hooks
- setup() function
- Watchers
- Custom directive hooks
- Transition hooks
The hook receives three arguments: the error, the component instance that triggered the error, and an information string specifying the error source type.
renderTracked: Called when a reactive dependency has been tracked by the component's render effect.
renderTriggered: Called when a reactive dependency triggers the component's render effect to be re-run.
activated: Called after the component instance is inserted into the DOM as part of a tree cached by <KeepAlive>.
deactivated: Called after the component instance is removed from the DOM as part of a tree cached by <KeepAlive>.
serverPrefetch: Async function to be resolved before the component instance is to be rendered on the server. If the hook returns a Promise, the server renderer will wait until the Promise is resolved before rendering the component.
Readmore: https://vuejs.org/api/options-lifecycle.html