Lifecycle hooks in Composition API in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run a function when the component is mounted.

Vue

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

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

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

AonMounted

BonCreated

ConInit

DonStart

Attempts:

3 left

💡 Hint

Common Mistakes

Using hooks that don't exist like onCreated or onInit.

Forgetting to import the hook from 'vue'.

The onMounted hook runs a function after the component is inserted into the DOM.

2fill in blank

medium

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

Vue

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

onBefore[1](() => {
  console.log('Cleanup before component unmounts')
})
</script>

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

ADetach

BDestroy

CRemove

DUnmount

Attempts:

3 left

💡 Hint

Common Mistakes

Using onBeforeDestroy which is from Vue 2 options API.

Misspelling the hook name.

The onBeforeUnmount hook runs just before the component is removed from the DOM, perfect for cleanup.

3fill in blank

hard

Fix the error in the code to run code when the component updates.

Vue

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

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

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

AUpdating

BUpdate

CUpdated

DUpdateded

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onUpdate' instead of 'onUpdated'.

Typo in the hook name.

The onUpdated hook runs after the component has updated and the DOM has been re-rendered.

4fill in blank

hard

Fill both blanks to run code before the component updates and after it updates.

Vue

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

onBefore[1](() => {
  console.log('Before update')
})
on[2](() => {
  console.log('After update')
})
</script>

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

AUpdate

BUpdated

CUnmount

DMounted

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'Unmount' and 'Update' hooks.

Using 'Mounted' instead of 'Updated' for after update.

onBeforeUpdate runs before the component updates, and onUpdated runs after the update.

5fill in blank

hard

Fill all three blanks to run code when the component is mounted, before unmount, and after update.

Vue

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

[1](() => {
  console.log('Mounted')
})
onBefore[2](() => {
  console.log('Before unmount')
})
on[3](() => {
  console.log('Updated')
})
</script>

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

AonMounted

BUnmount

CUpdated

DonUpdated

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onBeforeDestroy' instead of 'onBeforeUnmount'.

Confusing import names with hook suffixes.

Import onMounted, then use onBeforeUnmount and onUpdated hooks for the respective lifecycle events.