Vue JS Lifecycle Hooks 2

Question 1

In Vue 3 Composition API, what replaces the `beforeCreate` and `created` Options API hooks?

Accepted Answer

The setup() function itself — code in setup() runs at the same time as these hooks

Answer

In Composition API, the `setup()` function runs synchronously when the component instance is created, replacing both `beforeCreate` and `created`. Code placed at the top of `setup()` effectively runs at creation time.

Question 2

When does `onUpdated` fire and what should you avoid doing inside it?

Accepted Answer

After the component re-renders due to state/prop changes; avoid mutating state inside it to prevent infinite loops

Answer

`onUpdated` fires after the DOM is patched due to a reactive state change. Mutating reactive state inside it can trigger another update, potentially causing infinite loops.

Question 3

What does `nextTick` do in Vue 3 and when would you use it?

Accepted Answer

Waits for the next DOM update flush, then runs the callback — use after data changes when you need the updated DOM

Answer

`nextTick` schedules code to run after Vue flushes pending DOM updates, ensuring you're working with the updated DOM when you need to read layout or measurements after a state change.

Question 4

In Vue 3, how do you access a template ref (DOM element) inside a lifecycle hook?

Accepted Answer

Both A and C are correct

Answer

Template refs are accessed in Composition API via a `ref(null)` matched to a `ref="name"` attribute, available in `onMounted`. In Options API, `this.$refs` is the equivalent. Both are valid in Vue 3.

Question 5

What is the difference between `onMounted` and `onBeforeMount` in Vue 3?

Accepted Answer

`onBeforeMount` fires before DOM insertion (no $el yet); `onMounted` fires after the component and children are fully in the DOM

Answer

`onBeforeMount` fires right before the first render inserts the DOM. The component's reactive state is set up but the DOM doesn't exist yet. `onMounted` fires after the DOM is fully inserted.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Lifecycle Hooks 2