Vue JS Lifecycle Hooks

Question 1

What is the correct order of Vue 3 component lifecycle hooks for an initial mount?

Accepted Answer

setup → onBeforeMount → onMounted

Answer

onMounted → setup → onBeforeMount

Answer

onBeforeMount → setup → onMounted

Answer

setup → onMounted → onBeforeMount

Question 2

When does `onMounted` fire in Vue 3?

Accepted Answer

After the component has been mounted — the DOM is available and all child components are mounted

Answer

Before the component's first render

Answer

When the component receives new props

Answer

When the component is about to be destroyed

Question 3

What is the purpose of `onBeforeUnmount` in Vue 3?

Accepted Answer

Runs just before a component is removed from the DOM — ideal for cleanup like removing event listeners and canceling timers

Answer

Fires before route navigation away from the component

Answer

Runs before the component's props update

Answer

Cancels pending re-renders before unmounting

Question 4

Which lifecycle hook should you use to fetch initial data when a component loads?

Accepted Answer

onMounted (or created/setup for non-DOM dependent fetches)

Answer

onUpdated

Answer

onBeforeMount

Answer

onActivated

Question 5

What is `onActivated` and `onDeactivated` used for in Vue 3?

Accepted Answer

Hooks for components kept alive by `<KeepAlive>` — fire when the component enters/leaves the cache

Answer

Hooks for Vue Router navigation

Answer

Hooks for Pinia store activation

Answer

Lifecycle hooks for async components

Question 6

How do you use the `onErrorCaptured` hook in Vue 3?

Accepted Answer

Register a hook that receives errors from descendant components: onErrorCaptured((err, instance, info) => { ... })

Answer

Wrap async operations in a try/catch inside setup()

Answer

Use the global app.config.errorHandler instead

Answer

onErrorCaptured is not available in Composition API