Creating custom directives in Vue - Visual Walkthrough

Concept Flow - Creating custom directives

Define directive object

↓

Register directive globally or locally

↓

Use directive in template

↓

Vue calls directive hooks

↓

created

↓

Update hooks if reactive data changes

↓

Directive cleanup on unmount

You define a directive, register it, then Vue calls its hooks as the element is created, updated, and removed.

Execution Sample

Vue

const focusDirective = {
  mounted(el) {
    el.focus()
  }
}
app.directive('focus', focusDirective)

This code creates a custom directive that focuses an input element when it is mounted.

Execution Table

Step	Action	Directive Hook Called	Element State	Effect
1	Directive object defined	None	No element yet	No effect
2	Directive registered globally	None	No element yet	No effect
3	Template uses v-focus on input	None	<input>	No effect yet
4	Vue creates input element	created	<input>	Element created but not in DOM
5	Input element about to be inserted in DOM	beforeMount	<input>	Preparing to mount
6	Input element fully mounted	mounted	<input>	Input receives focus
7	Reactive data changes (if any)	updated	<input>	Directive can react to changes
8	Component unmounts	unmounted	<input>	Cleanup if needed
9	Directive lifecycle ends	None	Element removed	Focus lost, element gone

💡 Directive lifecycle ends when element is removed from DOM and component unmounts.

Variable Tracker

Variable	Start	After Step 3	After Step 6	After Step 8	Final
el (element)	undefined	<input>	<input focused>	<input removed>	undefined
directive hooks	not called	not called	mounted called	unmounted called	completed

Key Moments - 3 Insights

Why does the focus happen only at the mounted hook and not earlier?

Because the element is only fully inserted into the DOM at the mounted hook, so calling focus before that won't work. See execution_table step 6.

Can the directive respond to reactive data changes?

Yes, the updated hook runs when reactive data changes affect the element. See execution_table step 7.

What happens if the directive is not cleaned up on unmount?

It can cause memory leaks or unexpected behavior. The unmounted hook is for cleanup. See execution_table step 8.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the input element receive focus?

A Step 3

B Step 4

C Step 6

D Step 8

💡 Hint

Check the 'Effect' column for when the input receives focus.

According to variable_tracker, what is the state of 'el' after step 8?

A <input removed>

B <input>

C <input focused>

D undefined

💡 Hint

Look at the 'el (element)' row under 'After Step 8' column.

If the directive did not implement the unmounted hook, what might happen?

A The element would never mount.

B Memory leaks or leftover effects might occur.

C Focus would never be applied.

D The directive would not be registered.

💡 Hint

Refer to key_moments about cleanup on unmount.

Concept Snapshot

Creating custom directives in Vue:
- Define a directive object with hooks (created, beforeMount, mounted, updated, unmounted).
- Register it globally or locally.
- Use it in templates with v-yourDirective.
- Vue calls hooks as element lifecycle progresses.
- Use mounted to access DOM, unmounted for cleanup.

Full Transcript

Creating custom directives in Vue involves defining an object with lifecycle hooks like mounted and unmounted. You register this directive globally or locally in your app. When you use the directive in your template, Vue calls these hooks as the element is created, inserted into the DOM, updated, and eventually removed. For example, the mounted hook is where you can safely manipulate the DOM element, such as setting focus. The unmounted hook is important for cleaning up any side effects to avoid memory leaks. This flow ensures your directive behaves correctly with the element's lifecycle.