onBeforeMount and onBeforeUnmount in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to run a function before the component mounts.

Vue

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

onBeforeMount(() => {
  console.log([1])
})
</script>

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

AbeforeMount

Bmounted

C"Component is about to mount"

DonMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong lifecycle hook name.

Not passing a function to onBeforeMount.

Logging a variable that is not defined.

The onBeforeMount hook runs before the component mounts. You can put any code inside the function, like logging a message.

2fill in blank

medium

Complete the code to run cleanup code before the component unmounts.

Vue

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

onBeforeUnmount(() => {
  [1]('Cleaning up before unmount')
})
</script>

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

Aalert

Bfetch

CsetTimeout

Dconsole.log

Attempts:

3 left

💡 Hint

Common Mistakes

Using alert instead of console.log.

Calling a function without parentheses.

Trying to run asynchronous code without await.

The onBeforeUnmount hook runs just before the component is removed. It's a good place to clean up resources or log messages.

3fill in blank

hard

Fix the error in the lifecycle hook import statement.

Vue

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

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

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

AbeforeMount

BonBeforeMount

ConMount

Dmounted

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'beforeMount' instead of 'onBeforeMount'.

Confusing mount hooks with unmount hooks.

Misspelling the hook name.

The correct Vue lifecycle hook name to run code before mounting is onBeforeMount. The others are either incorrect or do not exist as imports.

4fill in blank

hard

Fill both blanks to log messages before mount and before unmount.

Vue

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

[1](() => console.log('Starting mount'))
[2](() => console.log('Starting unmount'))
</script>

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

AonBeforeMount

BonMounted

ConBeforeUnmount

DonUnmounted

Attempts:

3 left

💡 Hint

Common Mistakes

Using onMounted or onUnmounted instead of before hooks.

Mixing up mount and unmount hooks.

Forgetting to import both hooks.

Use onBeforeMount to run code before mounting and onBeforeUnmount before unmounting.

5fill in blank

hard

Fill all three blanks to create a component that logs before mount, before unmount, and after mount.

Vue

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

[1](() => console.log('Before mount'))
[3](() => console.log('Mounted'))
[2](() => console.log('Before unmount'))
</script>

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

AonBeforeMount

BonBeforeUnmount

ConMounted

DonUnmounted

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up onMounted and onBeforeMount.

Using onUnmounted instead of onBeforeUnmount.

Not importing all three hooks.

This code uses onBeforeMount to log before mounting, onBeforeUnmount before unmounting, and onMounted after the component mounts.

Practice

1. What is the main purpose of the onBeforeMount lifecycle hook in Vue?

easy

A. It runs when the component is updated.

B. It runs after the component is removed from the screen.

C. It runs only once when the app starts.

D. It runs right before the component appears on the screen.

Solution

1. Step 1: Understand the timing of onBeforeMount

   The onBeforeMount hook runs just before the component is rendered and shown on the screen.

2. Step 2: Compare with other lifecycle hooks

   Unlike hooks that run after removal or updates, onBeforeMount is specifically before the first render.

3. Final Answer:

   It runs right before the component appears on the screen. -> Option D

4. Quick Check:

   onBeforeMount = before component appears [OK]

Hint: onBeforeMount = just before showing component [OK]

Common Mistakes:

• Confusing onBeforeMount with onBeforeUnmount
• Thinking it runs after component removal
• Mixing it with update hooks

2. Which of the following is the correct way to use onBeforeUnmount inside the setup() function in Vue 3?

easy

A. onBeforeUnmount(function) { console.log('Unmount') }

B. onBeforeUnmount = () => { console.log('Component will unmount') }

C. onBeforeUnmount(() => { console.log('Component will unmount') })

D. setup(() => { onBeforeUnmount(console.log('Unmount')) })

Solution

1. Step 1: Recall correct syntax for lifecycle hooks in setup()

   Lifecycle hooks like onBeforeUnmount are called as functions with a callback inside setup().

2. Step 2: Identify correct arrow function usage

   onBeforeUnmount(() => { console.log('Component will unmount') }) correctly passes an arrow function to onBeforeUnmount to run code before unmount.

3. Final Answer:

   onBeforeUnmount(() => { console.log('Component will unmount') }) -> Option C

4. Quick Check:

   Use onBeforeUnmount(callback) inside setup() [OK]

Hint: Use onBeforeUnmount(() => {...}) inside setup() [OK]

Common Mistakes:

• Assigning onBeforeUnmount instead of calling it
• Calling onBeforeUnmount with wrong syntax
• Trying to use it outside setup()

3. Consider this Vue 3 component code snippet inside setup():

import { ref, onBeforeMount, onBeforeUnmount } from 'vue'

export default {
  setup() {
    const count = ref(0)
    onBeforeMount(() => { count.value = 5 })
    onBeforeUnmount(() => { count.value = 0 })
    return { count }
  }
}

What will be the value of count just before the component is removed from the screen?

medium

A. 0

B. 5

C. undefined

D. It causes an error

Solution

1. Step 1: Understand onBeforeMount effect

   When the component is about to mount, count.value is set to 5.

2. Step 2: Understand onBeforeUnmount effect

   Right before the component unmounts, count.value is reset to 0.

3. Final Answer:

   0 -> Option A

4. Quick Check:

   onBeforeUnmount resets count to 0 [OK]

Hint: onBeforeUnmount runs last, resetting count to 0 [OK]

Common Mistakes:

• Thinking count stays 5 after unmount
• Confusing onBeforeMount and onBeforeUnmount effects
• Assuming unmount hook does not change reactive data

4. What is wrong with this Vue 3 code inside setup()?

import { onBeforeUnmount } from 'vue'

export default {
  setup() {
    onBeforeUnmount = () => {
      console.log('Cleaning up')
    }
  }
}

medium

A. Missing import of onBeforeMount.

B. onBeforeUnmount is assigned instead of called with a callback.

C. Arrow function syntax is incorrect.

D. setup() must return a value.

Solution

1. Step 1: Check how onBeforeUnmount is used

   The code assigns a new function to onBeforeUnmount instead of calling it with a callback.

2. Step 2: Correct usage of onBeforeUnmount

   It should be called like onBeforeUnmount(() => { ... }) to register the cleanup function.

3. Final Answer:

   onBeforeUnmount is assigned instead of called with a callback. -> Option B

4. Quick Check:

   Use onBeforeUnmount(callback), not assignment [OK]

Hint: Call onBeforeUnmount(callback), don't assign it [OK]

Common Mistakes:

• Assigning lifecycle hook instead of calling it
• Forgetting parentheses for function call
• Confusing import errors with usage errors

5. You want to track how many times a component is about to mount and unmount using onBeforeMount and onBeforeUnmount. Which code correctly updates two counters mountCount and unmountCount inside setup()?

hard

A. const mountCount = ref(0); const unmountCount = ref(0);
onBeforeMount(() => { mountCount.value++ });
onBeforeUnmount(() => { unmountCount.value++ });
return { mountCount, unmountCount }

B. let mountCount = 0; let unmountCount = 0;
onBeforeMount(() => { mountCount++ });
onBeforeUnmount(() => { unmountCount++ });
return { mountCount, unmountCount }

C. const mountCount = 0; const unmountCount = 0;
onBeforeMount(() => { mountCount += 1 });
onBeforeUnmount(() => { unmountCount += 1 });
return { mountCount, unmountCount }

D. const mountCount = ref(0); const unmountCount = ref(0);
onBeforeMount(() => mountCount++);
onBeforeUnmount(() => unmountCount++);
return { mountCount, unmountCount }

Solution

1. Step 1: Use reactive refs for counters

   To track changes reactively, counters must be ref(0), not plain numbers.

2. Step 2: Increment ref values inside lifecycle hooks

   Inside onBeforeMount and onBeforeUnmount, increment with mountCount.value++ and unmountCount.value++.

3. Step 3: Return refs for template usage

   Return the refs so the template can react to changes.

4. Final Answer:

   const mountCount = ref(0); const unmountCount = ref(0); onBeforeMount(() => { mountCount.value++ }); onBeforeUnmount(() => { unmountCount.value++ }); return { mountCount, unmountCount } -> Option A

5. Quick Check:

   Use ref(0) and increment .value inside hooks [OK]

Hint: Use ref(0) and increment .value inside hooks [OK]

Common Mistakes:

• Using plain numbers instead of refs
• Incrementing refs without .value
• Not returning counters for template