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.