onBeforeMount and onBeforeUnmount in Vue - Step-by-Step Execution

Concept Flow - onBeforeMount and onBeforeUnmount

Component Setup

↓

onBeforeMount Hook

↓

Component Mounts to DOM

↓

Component Active

↓

Trigger Unmount

↓

onBeforeUnmount Hook

↓

Component Removed from DOM

This flow shows when Vue calls onBeforeMount before the component appears, and onBeforeUnmount just before it disappears.

Execution Sample

Vue

import { onBeforeMount, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => console.log('Before mount'));
    onBeforeUnmount(() => console.log('Before unmount'));
  }
};

This code logs messages right before the component mounts and right before it unmounts.

Execution Table

Step	Hook Triggered	Action	Console Output	Component State
1	Setup	Register hooks		Not mounted
2	onBeforeMount	Runs before mounting	Before mount	Not mounted yet
3	Mount	Component added to DOM		Mounted and visible
4	Active	Component running		Mounted and visible
5	Trigger unmount	Start unmount process		Mounted and visible
6	onBeforeUnmount	Runs before unmounting	Before unmount	Still mounted
7	Unmount	Component removed from DOM		Not mounted

💡 Component unmounted, lifecycle hooks completed

Variable Tracker

Variable	Start	After onBeforeMount	After Mount	After onBeforeUnmount	After Unmount
componentState	Not mounted	Not mounted yet	Mounted and visible	Still mounted	Not mounted

Key Moments - 2 Insights

Why does onBeforeMount run before the component is visible?

Because onBeforeMount is designed to run right before the component is added to the DOM, as shown in execution_table step 2.

Does onBeforeUnmount run after the component is removed from the DOM?

No, onBeforeUnmount runs just before the component is removed, as shown in execution_table step 6.

Visual Quiz - 3 Questions

Look at the execution table, what is the component state when onBeforeMount runs?

A Mounted and visible

B Not mounted yet

C Still mounted

D Not mounted

💡 Hint

Check the 'Component State' column at step 2 in the execution_table.

At which step does the component get removed from the DOM?

A Step 7

B Step 5

C Step 6

D Step 4

💡 Hint

Look for the 'Unmount' action in the execution_table.

If onBeforeUnmount was removed, what would change in the execution table?

A onBeforeMount would not run

B Component would not mount

C No console output 'Before unmount' at step 6

D Component would never unmount

💡 Hint

Check the 'Console Output' column at step 6 in the execution_table.

Concept Snapshot

onBeforeMount and onBeforeUnmount are Vue lifecycle hooks.
onBeforeMount runs just before the component is added to the DOM.
onBeforeUnmount runs just before the component is removed from the DOM.
Use them to run code at these exact moments.
They help prepare or clean up resources.
Called only once per mount/unmount cycle.

Full Transcript

In Vue, the onBeforeMount hook runs right before the component appears on the page. This lets you prepare things before the user sees the component. After the component is visible and active, when it is about to be removed, Vue calls onBeforeUnmount. This hook lets you clean up or stop things before the component disappears. The execution table shows the order: first setup, then onBeforeMount runs, then the component mounts and is visible. Later, when unmounting starts, onBeforeUnmount runs before the component is removed. The variable tracker shows the component state changing from not mounted, to mounted, then back to not mounted after unmount. Remember, onBeforeMount runs before the component is visible, and onBeforeUnmount runs before it is gone. These hooks help manage side effects tied to the component's presence on the page.

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