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

The `setup()` function (or `<script setup>`) runs first during component initialization, then `onBeforeMount` fires before DOM insertion, and `onMounted` fires after the component is in the DOM.

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

`onMounted` fires after the component is fully mounted in the DOM, including all synchronous child components. It's safe to access DOM elements and interact with third-party libraries here.

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

`onBeforeUnmount` fires when the component is about to be unmounted but is still fully functional. It's the last chance to clean up side effects before the component is destroyed.

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

Data fetching is typically done in `onMounted`. If the fetch doesn't need DOM access, you can also start it in `setup()` directly, which runs slightly earlier.

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

`onActivated` fires when a `<KeepAlive>` cached component is re-inserted into the DOM. `onDeactivated` fires when it's removed from DOM but kept in the cache.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Lifecycle Hooks