Effective scope for cleanup in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of cleanup in Vue's lifecycle?

Cleanup helps remove side effects like timers, event listeners, or subscriptions when a component is no longer needed. This prevents memory leaks and keeps the app efficient.

beginner

Where should you place cleanup code in Vue 3 Composition API?

Use the onUnmounted lifecycle hook inside the setup() function to run cleanup code when the component is destroyed.

intermediate

Why is it important to keep cleanup code scoped inside setup()?

Keeping cleanup code inside setup() ensures it only affects the current component instance and avoids accidental interference with other parts of the app.

beginner

How do you clean up a timer in Vue 3 Composition API?

Create the timer inside setup(), store its ID, and clear it inside onUnmounted(() => clearTimeout(timerId)) to stop it when the component unmounts.

beginner

What happens if you forget to clean up side effects in Vue components?

Side effects like timers or event listeners keep running, causing memory leaks and unexpected behavior, which can slow down or break your app over time.

In Vue 3 Composition API, which lifecycle hook is used for cleanup?

A onCreated

B onUnmounted

C onUpdated

D onMounted

The onUnmounted hook runs when the component is removed, making it the right place for cleanup.

Where should cleanup code be placed to keep it effective and scoped?

A Inside setup() function

B Outside any function

C In the template section

D In a global script

Placing cleanup inside setup() keeps it tied to the component's lifecycle and scope.

What is a common side effect that needs cleanup in Vue components?

A Template markup

B Static HTML content

C CSS styles

D Timers like setTimeout or setInterval

Timers continue running unless cleared, so they need cleanup.

What problem can happen if cleanup is not done properly?

A Memory leaks and slow app performance

B Faster app loading

C Better user experience

D Automatic bug fixes

Not cleaning up causes memory leaks, which slow down the app.

Which of these is NOT a good practice for cleanup in Vue?

A Using onUnmounted inside setup()

B Clearing timers when component unmounts

C Leaving event listeners active after component removal

D Removing subscriptions on unmount

Leaving event listeners active causes memory leaks and bugs.

Explain how to properly scope cleanup code in a Vue 3 component using the Composition API.

Think about where side effects start and where they should end.

Describe why cleanup is important in Vue components and what can happen if it is neglected.

Consider what happens when components disappear but their effects keep running.