onMounted and onUnmounted in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run a function when the component is first shown.

Vue

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

[1](() => {
  console.log('Component is mounted')
})
</script>

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

AonMounted

BonUnmounted

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using onUnmounted instead of onMounted

Forgetting to import the function

Using ref instead of lifecycle hooks

The onMounted function runs code when the component appears on screen.

2fill in blank

medium

Complete the code to run cleanup code when the component is removed.

Vue

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

[1](() => {
  console.log('Component is unmounted')
})
</script>

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

AonMounted

BonUnmounted

Ccomputed

DwatchEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using onMounted instead of onUnmounted

Not importing the function

Using watchEffect for lifecycle cleanup

The onUnmounted function runs code when the component is removed from the page, useful for cleanup.

3fill in blank

hard

Fix the error in the code to properly log when the component mounts.

Vue

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

onMounted(() => {
  console.log('Mounted at: ' + [1])
})
</script>

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

ADate.now()

BDate

Cnew Date()

DDate.toString()

Attempts:

3 left

💡 Hint

Common Mistakes

Using Date without new keyword

Using Date.now() which returns a number, not a date object

Trying to call toString on Date class directly

Using new Date() creates a date object representing the current time, which can be logged.

4fill in blank

hard

Fill both blanks to log messages when the component mounts and unmounts.

Vue

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

[1](() => {
  console.log('Mounted')
})

[2](() => {
  console.log('Unmounted')
})
</script>

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

AonMounted

Bref

ConUnmounted

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up onMounted and onUnmounted

Importing ref or watch instead of lifecycle hooks

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

5fill in blank

hard

Fill all three blanks to import lifecycle hooks and use them to log mount and unmount events.

Vue

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

[1](() => {
  console.log('Component mounted')
})

[2](() => {
  console.log('Component unmounted')
})

const message = 'Hello Vue'
console.log([3])
</script>

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

AonMounted

Bmessage

ConUnmounted

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of lifecycle hooks

Logging a lifecycle hook instead of the variable

Mixing up import names

We import onMounted and onUnmounted to run code at lifecycle events. The variable message is logged last.