beforeCreate: Called when component instance is initialized, data and events are not set at this time, so this.$data and this.$el cannot be accessed; 2. created: Called after the instance is created, the data and methods have been initialized, but the DOM is not mounted, which is suitable for data initialization and API calls; 3. beforeMount: Called before mount, the template has been compiled but not rendered to the DOM, which is rarely used; 4. mounted: Called after component mount, this.$el is available, which is often used for DOM operations, initialization of third-party libraries or data acquisition; 5. beforeUpdate: Called when data is updated, before re-rendering, and can access the DOM state before update; 6. updated: Called after component update, DOM has been re-rendered, which is suitable for performing updated DOM operations, and unprotected state modifications are required to prevent loop triggering; 7. beforeUnmount (Vue 3)/beforeDestroy (Vue 2): Called before component uninstallation, the instance is still available, and the event listener, timer, subscription, etc. should be cleaned here; 8. unmounted (Vue 3)/destroyed (Vue 2): Called after component uninstallation, all bindings and subcomponents have been removed, and can be used for final cleaning or logging; in addition, errorCaptured is used to capture subcomponent errors, renderTracked and renderTriggered (Vue 3) are used to debug responsive dependencies; the life cycle order is: beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted, Composition In the API, functions such as onMounted and onUpdated are used, and the execution order remains unchanged; best practices recommend getting data as soon as possible. Created is more suitable for initiating requests than mounted, especially in server-side rendering scenarios.

In Vue.js, lifecycle hooks are special methods that allow you to run code at specific stages of a component's life — from creation to destruction. Understanding their order is cruel for tasks like data fetching, DOM manipulation, or cleanup.

Here are the main lifecycle hooks in a Vue component (using Options API), listed in the order they are called:

1. beforeCreate

• Called right when the component instance is initialized.
• At this point, data observation, events, and reactive properties have not been set up yet.
• this.$data and this.$el are not accessible.

Use case: Rarely used, but can be helpful for debugging initialization issues.

2. created

• Called after the instance is created.
• Data, methods, computed properties, and watchers are now set up.
• However, the component's DOM element ( $el ) is not yet created , so you can't access the template or mount point.

Use case: Ideal for initial data setup, starting API calls, or setting up event listeners.

3. beforeMount

• Runs right before the component is about to be mounted (rendered into the DOM).
• The template has been compiled, but no DOM rendering has happened yet.

Use case: Not commonly used, but can be useful for final checks before rendering.

4. mounted

• Called after the component has been mounted and the DOM is rendered.
• this.$el is now available and can be accessed.
• If the component has child components, they may not all be mounted yet.

Use case: Commonly used for:

• Fetching initial data (though sometimes better in created )
• Working with DOM elements (eg, initializing 3rd-party libraries)
• Setting up times or subscriptions

5. beforeUpdate

• Called when reactive data changes, before the virtual DOM is re-rendered and patched.
• You can access the old DOM state here.

Use case: Useful for caching data or performing logic before an update.

6. updated

• Called after the component's DOM has been re-rendered due to data changes.
• Virtual DOM has been re-rendered and patched.

Use case: Perform DOM operations after an update. Be cautious — avoid modifying state here unless guarded, to prevent infinite loops.

7. beforeUnmount (Vue 3) / beforeDestroy (Vue 2)

• Called right before the component is destroyed.
• The instance is still fully functional.
• Cleanup tasks should be done here.

Use case: Essential for cleaning up:

• Event listeners
• Timers ( setInterval , setTimeout )
• Subscriptions or WebSocket connections
• Third-party integrations

8. unmounted (Vue 3) / destroyed (Vue 2)

• Called after the component has been removed from the DOM and all its bindings are unbound.
• All child components are also destroyed.

Use case: Final cleanup or logging; component instance is no longer usable.

Optional: Error Handling Hooks

• errorCaptured : Called when an error from a descendant component is captured.
• renderTracked / renderTriggered (Vue 3): Debugging hooks for tracking reactivity during rendering.

Summary of Execution Order:

 beforeCreate
 → created
 → beforeMount
 → mounted
 → beforeUpdate
 → updated
 → beforeUnmount // beforeDestroy in Vue 2
 → unmounted // destroyed in Vue 2

?? Note: In Vue 3 Composition API , you use onMounted() , onUpdated() , etc., inside setup() , but the underlying lifecycle sequence remains the same.

Quick Tip:
Don't fetch data in mounted if you can do it earlier — created is often better to start loading data as soon as possible, especially in SSR (Server-Side Rendering) contexts.

Basically, just follow the flow: setup → render → update → cleanup.

The above is the detailed content of What are the lifecycle hooks in a Vue component and in what order are they called. For more information, please follow other related articles on the PHP Chinese website!