Effective scope for cleanup in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a cleanup function inside onMounted in Vue Composition API.

Vue

<script setup>
import { onMounted, [1] } from 'vue'

onMounted(() => {
  const cleanup = () => {
    console.log('Cleanup done')
  }
  [1](() => {
    cleanup()
  })
})
</script>

Drag options to blanks, or click blank then click option'

Aref

Bwatch

ConUnmounted

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using watch instead of a lifecycle hook.

Trying to cleanup inside onMounted without unmount hook.

In Vue, onUnmounted is used to run cleanup code when the component is removed.

2fill in blank

medium

Complete the code to register an event listener and clean it up properly in Vue Composition API.

Vue

<script setup>
import { onMounted, [1] } from 'vue'

onMounted(() => {
  const onResize = () => {
    console.log('Window resized')
  }
  window.addEventListener('resize', onResize)
  [1](() => {
    window.removeEventListener('resize', onResize)
  })
})
</script>

Drag options to blanks, or click blank then click option'

AonUnmounted

Bwatch

Ccomputed

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Not removing the event listener on unmount.

Using watch instead of lifecycle hooks.

onUnmounted is used to remove event listeners when the component is destroyed to avoid memory leaks.

3fill in blank

hard

Fix the error in the cleanup function scope to properly remove the event listener.

Vue

<script setup>
import { onMounted, onUnmounted } from 'vue'

let onScroll
onMounted(() => {
  onScroll = () => {
    console.log('Scrolled')
  }
  window.addEventListener('scroll', [1])
})

onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
})
</script>

Drag options to blanks, or click blank then click option'

AonUnmounted

B() => console.log('Scrolled')

ConMounted

DonScroll

Attempts:

3 left

💡 Hint

Common Mistakes

Passing an anonymous function to addEventListener and trying to remove a different function.

Not storing the function reference outside onMounted.

The event listener must be removed with the exact same function reference used when adding it. Using onScroll ensures this.

4fill in blank

hard

Fill both blanks to create a reactive ref and clean it up properly.

Vue

<script setup>
import { ref, [1], [2] } from 'vue'

const count = ref(0)

[1](() => {
  const interval = setInterval(() => {
    count.value++
  }, 1000)

  return () => clearInterval(interval)
})
</script>

Drag options to blanks, or click blank then click option'

AonMounted

BonUnmounted

CwatchEffect

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using onMounted without cleanup.

Not returning a cleanup function inside watchEffect.

watchEffect runs the effect and returns a cleanup function. onUnmounted is imported but not used here.

5fill in blank

hard

Fill all three blanks to properly setup and cleanup a custom event listener with Vue Composition API.

Vue

<script setup>
import { onMounted, [1], ref } from 'vue'

const message = ref('')

onMounted(() => {
  const onCustomEvent = (event) => {
    message.value = event.detail
  }
  window.addEventListener('custom-event', onCustomEvent)
  [2](() => {
    window.removeEventListener('custom-event', [3])
  })
})
</script>

Drag options to blanks, or click blank then click option'

AonUnmounted

BonCustomEvent

ConMounted

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different function or anonymous function in removeEventListener.

Not cleaning up event listeners on unmount.

onUnmounted is used to clean up the event listener. The same function onCustomEvent must be passed to removeEventListener.

Practice

1. In Vue, which lifecycle hook is best to use for cleaning up timers or event listeners when a component is removed?

easy

A. onUpdated

B. onMounted

C. onUnmounted

D. onCreated

Solution

1. Step 1: Understand Vue lifecycle hooks

   onMounted runs when the component appears, onUnmounted runs when it disappears.

2. Step 2: Identify cleanup timing

   Cleanup like stopping timers or removing listeners should happen when the component is removed, so onUnmounted is the right hook.

3. Final Answer:

   onUnmounted -> Option C

4. Quick Check:

   Cleanup runs on unmount = C [OK]

Hint: Cleanup always goes in onUnmounted hook [OK]

Common Mistakes:

• Using onMounted for cleanup
• Confusing onUpdated with cleanup
• Trying to cleanup in onCreated

2. Which of the following is the correct syntax to register a cleanup function in Vue's setup() using the onUnmounted hook?

easy

A. onUnmounted(() => { clearInterval(timer) })

B. onUnmounted = () => { clearInterval(timer) }

C. onUnmounted.clear(() => { clearInterval(timer) })

D. onUnmounted.clearInterval(timer)

Solution

1. Step 1: Recall Vue hook syntax

   Vue lifecycle hooks like onUnmounted are functions that take a callback to run on that event.

2. Step 2: Match correct syntax

   The correct way is calling onUnmounted with a function: onUnmounted(() => { ... }). Other options misuse assignment or methods.

3. Final Answer:

   onUnmounted(() => { clearInterval(timer) }) -> Option A

4. Quick Check:

   Hook usage = function call with callback [OK]

Hint: Hooks are called with a function, not assigned [OK]

Common Mistakes:

• Assigning instead of calling onUnmounted
• Using nonexistent methods on onUnmounted
• Missing arrow function wrapper

3. What will be the console output when this Vue component unmounts?

setup() {
  const timer = setInterval(() => console.log('tick'), 1000)
  onUnmounted(() => clearInterval(timer))
}

medium

A. Logs 'tick' only once when component unmounts

B. Logs 'tick' every second until component unmounts, then stops

C. No logs appear at all

D. Throws an error on unmount

Solution

1. Step 1: Understand setInterval behavior

   setInterval logs 'tick' every 1000ms continuously until cleared.

2. Step 2: Analyze cleanup with onUnmounted

   When the component unmounts, clearInterval(timer) stops the interval, so logging stops after unmount.

3. Final Answer:

   Logs 'tick' every second until component unmounts, then stops -> Option B

4. Quick Check:

   Interval runs until cleared on unmount [OK]

Hint: Intervals run until cleared in onUnmounted [OK]

Common Mistakes:

• Thinking logs stop immediately without unmount
• Expecting logs only once on unmount
• Assuming error on clearInterval

4. Identify the problem in this Vue setup function and how to fix it:

setup() {
  const timer = setInterval(() => console.log('tick'), 1000)
  onMounted(() => clearInterval(timer))
}

medium

A. Cleanup runs too early; should use onUnmounted instead

B. Timer is never created; setInterval is missing

C. clearInterval is called without timer variable

D. No problem; code works correctly

Solution

1. Step 1: Check when cleanup runs

   Using onMounted to clear interval means it stops immediately after mounting, so no ticks happen.

2. Step 2: Correct cleanup timing

   Cleanup should happen when component unmounts, so onUnmounted is the correct hook to clear the timer.

3. Final Answer:

   Cleanup runs too early; should use onUnmounted instead -> Option A

4. Quick Check:

   Cleanup must be on unmount, not mount [OK]

Hint: Cleanup belongs in onUnmounted, not onMounted [OK]

Common Mistakes:

• Clearing timer on mount instead of unmount
• Assuming onMounted is for cleanup
• Ignoring lifecycle hook purpose

5. You have a Vue component that subscribes to a WebSocket in setup(). Which pattern correctly ensures the subscription is cleaned up only when the component unmounts?

setup() {
  const socket = new WebSocket('wss://example.com')
  socket.onmessage = (event) => console.log(event.data)
  // What cleanup code and where?
}

hard

A. Call socket.close() immediately after creating socket

B. No cleanup needed for WebSocket in Vue

C. Use onMounted(() => socket.close()) to close socket on mount

D. Use onUnmounted(() => socket.close()) inside setup

Solution

1. Step 1: Understand WebSocket lifecycle

   WebSocket stays open until closed; closing it too early stops messages.

2. Step 2: Place cleanup in onUnmounted

   To avoid leaks, close the socket when component unmounts using onUnmounted(() => socket.close()).

3. Final Answer:

   Use onUnmounted(() => socket.close()) inside setup -> Option D

4. Quick Check:

   Cleanup subscriptions on unmount with onUnmounted [OK]

Hint: Close subscriptions in onUnmounted hook [OK]

Common Mistakes:

• Closing socket immediately after creation
• Closing socket on mount instead of unmount
• Skipping cleanup causing memory leaks