Lifecycle hooks in Composition API in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the onMounted hook runs?

Consider this Vue 3 component using Composition API:

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('');
    onMounted(() => {
      message.value = 'Hello from mounted!';
    });
    return { message };
  }
}

What will the component display after it is mounted?

A The component initially shows an empty string, then updates to 'Hello from mounted!' after mounting.

B The component shows 'Hello from mounted!' immediately before mounting.

C The component never updates the message and stays empty.

D The component throws an error because <code>onMounted</code> cannot access <code>message</code>.

💡 Hint

Remember that onMounted runs after the component is inserted into the DOM.

The onMounted hook runs after the component is mounted. It updates the reactive message value, causing the component to re-render and show the new message.

❓ state_output

intermediate

What is the value of count after onBeforeUpdate runs?

Look at this Vue 3 setup function:

import { ref, onBeforeUpdate } from 'vue';

export default {
  setup() {
    const count = ref(0);
    onBeforeUpdate(() => {
      count.value += 1;
    });
    function increment() {
      count.value += 1;
    }
    return { count, increment };
  }
}

If the user clicks a button that calls increment once, what will be the value of count after the onBeforeUpdate hook runs?

A 1

B 0

C 2

D 3

💡 Hint

The onBeforeUpdate hook runs before the DOM updates but after reactive state changes.

When increment is called, count increases from 0 to 1. Then onBeforeUpdate runs and adds 1 more, making count equal to 2.

📝 Syntax

advanced

Which option correctly uses onUnmounted in Composition API?

Select the code snippet that correctly registers a cleanup function to run when the component unmounts.

A onUnmounted(() => { console.log('Component unmounted'); });

B onUnmounted { console.log('Component unmounted'); }

C onUnmount(() => { console.log('Component unmounted'); });

D onUnmounted(() => console.log('Component unmounted'))

💡 Hint

Check the exact function name and syntax for arrow functions.

The correct hook name is onUnmounted and it requires a function argument. Option A uses correct syntax with an arrow function and parentheses.

🔧 Debug

advanced

Why does this onUpdated hook cause an infinite loop?

Examine this setup function:

import { ref, onUpdated } from 'vue';

export default {
  setup() {
    const count = ref(0);
    onUpdated(() => {
      count.value++;
    });
    return { count };
  }
}

What causes the infinite update loop?

A The component lacks a template, so updates never finish.

B The <code>count</code> ref is not initialized properly.

C The <code>onUpdated</code> hook is missing a cleanup function.

D The <code>onUpdated</code> hook changes reactive state, triggering another update endlessly.

💡 Hint

Think about what happens when reactive state changes inside update hooks.

Modifying reactive state inside onUpdated triggers another update, causing an endless loop of updates.

🧠 Conceptual

expert

Which lifecycle hook runs only once during the component's lifetime?

In Vue 3 Composition API, which lifecycle hook is guaranteed to run exactly once per component instance?

A onUnmounted

B onMounted

C onBeforeUpdate

D onUpdated

💡 Hint

Think about hooks that run multiple times versus those that run once.

onMounted runs once after the component is inserted into the DOM. Other hooks like onUpdated and onBeforeUpdate can run many times. onUnmounted runs once but only when the component is removed.

Practice

1. Which lifecycle hook in Vue's Composition API runs code right after the component is added to the page?

easy

A. onUpdated

B. onCreated

C. onDestroyed

D. onMounted

Solution

1. Step 1: Understand the lifecycle phases

   The onMounted hook runs after the component is inserted into the DOM.

2. Step 2: Match the hook to the action

   Since the question asks for the hook that runs right after adding to the page, onMounted is the correct choice.

3. Final Answer:

   onMounted -> Option D

4. Quick Check:

   Mounted = after insert [OK]

Hint: Remember: mounted means component is on the page [OK]

Common Mistakes:

• Confusing onMounted with onCreated
• Thinking onUpdated runs after mounting
• Using onDestroyed for setup tasks

2. Which of these is the correct way to import and use the onUnmounted hook inside the setup() function?

easy

A. import onUnmounted from 'vue';setup() { onUnmounted(() => { /* cleanup */ }); }

B. import { onUnmounted } from 'vue';setup() { onUnmounted(() => { /* cleanup */ }); }

C. import { onUnmounted } from 'vue';setup() { onUnmounted = () => { /* cleanup */ }; }

D. import { onUnmounted } from 'vue';setup() { onUnmounted; }

Solution

1. Step 1: Check import syntax

   The correct import uses curly braces: import { onUnmounted } from 'vue';

2. Step 2: Check usage inside setup

   The hook is called as a function with a callback: onUnmounted(() => { /* cleanup */ });

3. Final Answer:

   Correct import and call syntax -> Option B

4. Quick Check:

   Import with braces + call hook [OK]

Hint: Import hooks with braces and call them as functions [OK]

Common Mistakes:

• Importing without braces
• Assigning hook to a variable instead of calling
• Calling hook without a callback function

3. What will be logged to the console when this Vue component runs?

import { ref, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    onMounted(() => {
      count.value = 5;
      console.log('Mounted count:', count.value);
    });
    return { count };
  }
}

medium

A. Mounted count: 5

B. Mounted count: 0

C. Mounted count: undefined

D. No output

Solution

1. Step 1: Understand ref and onMounted

   count starts at 0, then inside onMounted it is set to 5 and logged.

2. Step 2: Predict console output

   The console logs 'Mounted count:' followed by the updated value 5.

3. Final Answer:

   Mounted count: 5 -> Option A

4. Quick Check:

   Value updated before log in onMounted [OK]

Hint: onMounted runs after setup, so updated values show [OK]

Common Mistakes:

• Assuming count is still 0 inside onMounted
• Thinking onMounted runs before setup returns
• Confusing ref.value with ref itself

4. Identify the error in this Vue Composition API code snippet:

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted = () => {
      console.log('Mounted');
    };
  }
}

medium

A. onMounted is incorrectly assigned instead of called

B. Missing import of onUnmounted

C. setup() should return a value

D. Console.log syntax is wrong

Solution

1. Step 1: Check how onMounted is used

   The code assigns a function to onMounted instead of calling it with a callback.

2. Step 2: Understand correct usage

   The correct usage is onMounted(() => { ... }), not assignment.

3. Final Answer:

   onMounted is incorrectly assigned instead of called -> Option A

4. Quick Check:

   Hooks are called, not reassigned [OK]

Hint: Use onMounted(callback), don't assign it like a variable [OK]

Common Mistakes:

• Assigning hook instead of calling it
• Forgetting to pass a function to onMounted
• Thinking setup must always return something

5. You want to fetch data when a component mounts and cancel a timer when it unmounts using Composition API. Which code snippet correctly uses lifecycle hooks to do this?

hard

A. import { ref, onUnmounted } from 'vue';
export default {
setup() {
const data = ref(null);
let timer = setInterval(() => console.log('tick'), 1000);
onUnmounted(() => {
clearInterval(timer);
});
return { data };
}
}

B. import { ref, onMounted } from 'vue';
export default {
setup() {
const data = ref(null);
onMounted(() => {
fetch('/api/data').then(res => res.json()).then(json => data.value = json);
setInterval(() => console.log('tick'), 1000);
});
return { data };
}
}

C. import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const data = ref(null);
let timer;
onMounted(() => {
fetch('/api/data').then(res => res.json()).then(json => data.value = json);
timer = setInterval(() => console.log('tick'), 1000);
});
onUnmounted(() => {
clearInterval(timer);
});
return { data };
}
}

D. import { ref } from 'vue';
export default {
setup() {
const data = ref(null);
fetch('/api/data').then(res => res.json()).then(json => data.value = json);
let timer = setInterval(() => console.log('tick'), 1000);
return { data };
}
}

Solution

1. Step 1: Check data fetching on mount

   import { ref, onMounted, onUnmounted } from 'vue';
   export default {
     setup() {
       const data = ref(null);
       let timer;
       onMounted(() => {
         fetch('/api/data').then(res => res.json()).then(json => data.value = json);
         timer = setInterval(() => console.log('tick'), 1000);
       });
       onUnmounted(() => {
         clearInterval(timer);
       });
       return { data };
     }
   }

   uses onMounted to fetch data and start the timer, which is correct.

2. Step 2: Check cleanup on unmount

   import { ref, onMounted, onUnmounted } from 'vue';
   export default {
     setup() {
       const data = ref(null);
       let timer;
       onMounted(() => {
         fetch('/api/data').then(res => res.json()).then(json => data.value = json);
         timer = setInterval(() => console.log('tick'), 1000);
       });
       onUnmounted(() => {
         clearInterval(timer);
       });
       return { data };
     }
   }

   uses onUnmounted to clear the timer, preventing memory leaks.

3. Final Answer:

   Correctly uses onMounted and onUnmounted hooks -> Option C

4. Quick Check:

   Fetch on mount + cleanup on unmount [OK]

Hint: Use onMounted for setup, onUnmounted for cleanup [OK]

Common Mistakes:

• Starting timers outside lifecycle hooks
• Not clearing timers on unmount
• Fetching data outside onMounted