Lifecycle hooks in Composition API in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of lifecycle hooks in Vue's Composition API?

Lifecycle hooks let you run code at specific times during a component's life, like when it starts, updates, or stops. They help manage side effects and resource cleanup.

beginner

Name three common lifecycle hooks used in Vue's Composition API.

Three common hooks are onMounted (runs after the component is added to the page), onUpdated (runs after reactive data changes update the DOM), and onUnmounted (runs after the component is removed from the DOM).

beginner

How do you use onMounted in the Composition API?

Import <code>onMounted</code> from Vue, then call it inside the <code>setup()</code> function with a callback. This callback runs after the component appears on the page.

intermediate

What is the difference between onBeforeUnmount and onUnmounted?

onBeforeUnmount runs just before the component is removed, letting you clean up resources early. onUnmounted runs right after the component is removed from the DOM.

intermediate

Why is it better to use lifecycle hooks inside setup() in Composition API instead of Options API?

Using hooks inside setup() groups related logic together, making code easier to read and maintain. It avoids scattering lifecycle code across different options like mounted or updated.

Which lifecycle hook runs after the component is added to the DOM in Vue's Composition API?

A onMounted

B onUpdated

C onUnmounted

D onBeforeMount

onMounted runs after the component is inserted into the DOM, perfect for starting side effects.

Where do you place lifecycle hooks when using Vue's Composition API?

A Outside the component definition

B Inside the <code>setup()</code> function

C Inside the <code>methods</code> option

D Inside the <code>data()</code> option

Lifecycle hooks are called inside setup() to keep logic organized.

Which hook would you use to clean up timers or event listeners before a component is removed?

A onMounted

B onUpdated

C onBeforeUnmount

D onCreated

onBeforeUnmount is used to clean up resources before the component disappears.

What does the onUpdated hook do in Vue's Composition API?

A Runs only once when the app starts

B Runs before the component is mounted

C Runs when the component is destroyed

D Runs after reactive data changes update the DOM

onUpdated runs after the DOM updates due to reactive data changes.

Which import is needed to use lifecycle hooks in Vue's Composition API?

A import { onMounted } from 'vue'

B import { useEffect } from 'vue'

C import { lifecycle } from 'vue'

D import { componentDidMount } from 'vue'

Vue provides lifecycle hooks like onMounted directly from the 'vue' package.

Explain how to use lifecycle hooks in Vue's Composition API and why they are useful.

Think about when you want to run code during a component's life.

Describe the difference between onBeforeUnmount and onUnmounted hooks in Vue's Composition API.

Consider when you want to stop timers or listeners.

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