Directive hooks (mounted, updated, unmounted) in Vue - Step-by-Step Execution

Concept Flow - Directive hooks (mounted, updated, unmounted)

Directive Created

↓

mounted hook runs

↓

Element inserted in DOM

↓

Reactive data changes?

Yes↓

updated hook runs

↓

Element updated in DOM

↓

Directive removed?

Yes↓

unmounted hook runs

↓

Cleanup done

This flow shows how Vue directive hooks run: mounted when element is added, updated when reactive data changes, and unmounted when element is removed.

Execution Sample

Vue

const myDirective = {
  mounted(el) { el.textContent = 'Hello'; },
  updated(el) { el.textContent = 'Updated'; },
  unmounted(el) { console.log('Cleaned'); }
};

A Vue directive that sets text on mount, updates text on reactive changes, and logs cleanup on unmount.

Execution Table

Step	Hook Trigger	Element Text Content	Console Output	Description
1	mounted	"Hello"		Directive mounted, sets text to 'Hello'
2	Reactive data changes	"Updated"		updated hook runs, text changes to 'Updated'
3	Reactive data changes	"Updated"		updated hook runs again, text remains 'Updated'
4	Directive removed	"Updated"	'Cleaned'	unmounted hook runs, logs 'Cleaned'

💡 Directive lifecycle ends after unmounted hook runs and cleanup is done.

Variable Tracker

Variable	Start	After mounted	After updated 1	After updated 2	After unmounted
el.textContent	""	"Hello"	"Updated"	"Updated"	"Updated"
console.log	""	""	""	""	"Cleaned"

Key Moments - 3 Insights

Why does the 'updated' hook run multiple times?

Because reactive data changes multiple times, triggering the updated hook each time as shown in rows 2 and 3 of the execution_table.

Does the 'mounted' hook run again after updates?

No, the mounted hook runs only once when the directive is first attached, as shown in step 1 of the execution_table.

What happens in the 'unmounted' hook?

It runs when the directive is removed from the DOM to clean up, here it logs 'Cleaned' as shown in step 4 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the element's text content after the first updated hook runs?

A "Updated"

B "Cleaned"

C "Hello"

D ""

💡 Hint

Check row 2 under 'Element Text Content' in the execution_table.

At which step does the unmounted hook run?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look for 'Directive removed' and 'unmounted hook runs' in the execution_table.

If the reactive data never changes, which hooks run?

A mounted and updated

B only mounted

C mounted and unmounted

D only unmounted

💡 Hint

Refer to the concept_flow showing mounted runs on insert and unmounted on removal, updated runs only on reactive changes.

Concept Snapshot

Vue directive hooks:
- mounted: runs once when element is inserted
- updated: runs on reactive data changes
- unmounted: runs when element is removed
Use hooks to manage element behavior and cleanup.

Full Transcript

This visual trace shows Vue directive hooks lifecycle. First, the mounted hook runs when the directive attaches to the element, setting its text content. Then, when reactive data changes, the updated hook runs multiple times, updating the text content each time. Finally, when the directive is removed from the DOM, the unmounted hook runs to clean up, here logging a message. The variable tracker shows how the element's text content changes step by step and when console logs occur. Key moments clarify why updated runs multiple times and that mounted runs only once. The quiz tests understanding of hook timing and effects.