Discover published sets by community

Invoked immediately after the instance has been initialized, before data observation and event/watcher setup. Typically used to apply plugins.

Functional components in Vue are stateless, instance-less components that don't have access to lifecycle hooks. They are used for rendering purposes and introduced for performance optimizations.

Called after a data change causes the virtual DOM to be re-rendered and patched to the DOM. Use case: Executing code after the component’s DOM has been updated.

Runs right before the initial rendering is performed, after the template is compiled into a render function. Use case: Applying dynamic changes to the DOM before it's drawn.

Invoked when data changes and the DOM must be re-rendered, before the update patch is applied. Use case: Executing code before the DOM is updated.

Called after the instance is created, when instance has finished processing the options which means data observation, computed properties, methods, watch/event callbacks have been set up. Use case: Fetching data for the component.

Called once the component has been mounted, allowing direct access to the component via the DOM. Common use case: Accessing the DOM or setting up any JavaScript DOM manipulations.

Invoked immediately before a Vue instance is destroyed, providing an opportunity to perform cleanup or teardown operations. Use case: Removing event listeners or cancelling subscriptions.

Used with keep-alive components, fired when a cached component is deactivated. Use case: Cleanup activities when the component is being toggled away from.

Invoked when a new re-render is triggered because a reactive dependency has changed. Typical use: Debugging and performance tuning to see which dependency caused a re-render.

A hook for capturing errors from descendants. It takes three arguments: the error, the component instance, and a string specifying information about where the error was captured. Typical use: Error handling across the component hierarchy.

Specific to keep-alive components, triggered when a cached component is reactivated. Use case: Useful if the component needs to refresh data or respond to the reactivation.

Used in server-side rendering for fetching data and rendering it on the server before sending the payload to the client. Use case: Reducing time-to-contentful-view by preloading data on the server.

Called once a component is fully unmounted from the DOM. Use for final cleanup or informing any instance that depended on the now-unmounted component.

Called when a reactive dependency is tracked during rendering. The hook receives a debugger event. Use case: Debugging and performance optimization, by getting insights into rendering dependencies.

Invoked before unmounting begins: the instance has not yet been fully unmounted. Use this hook for cleanup or to inform children components that the parent is being unmounted.