Directive hooks (mounted, updated, unmounted) in Vue

Introduction

Directive hooks let you run code at specific times when a custom directive is added, changed, or removed from an element. This helps you control element behavior easily.

You want to add special behavior when an element appears on the page.

You need to update something when the element's data changes.

You want to clean up or remove event listeners when the element is removed.

You want to create reusable custom behaviors for elements.

You want to control animations or effects tied to element lifecycle.

Syntax

Vue

const myDirective = {
  mounted(el, binding, vnode, prevVnode) {
    // runs when directive is first attached to element
  },
  updated(el, binding, vnode, prevVnode) {
    // runs when element or binding updates
  },
  unmounted(el, binding, vnode, prevVnode) {
    // runs when directive is removed from element
  }
};

mounted runs once when the directive is first added.

updated runs whenever the bound value or element updates.

Examples

This directive sets focus on the element when it appears.

Vue

const focusDirective = {
  mounted(el) {
    el.focus();
  }
};

This directive changes the text color whenever the bound value changes.

Vue

const colorDirective = {
  mounted(el, binding) {
    el.style.color = binding.value;
  },
  updated(el, binding) {
    el.style.color = binding.value;
  }
};

This directive adds a click alert and removes it when the element is removed.

Vue

const cleanupDirective = {
  mounted(el) {
    const handler = () => alert('Clicked!');
    el._clickHandler = handler;
    el.addEventListener('click', handler);
  },
  unmounted(el) {
    if (el._clickHandler) {
      el.removeEventListener('click', el._clickHandler);
      delete el._clickHandler;
    }
  }
};

Sample Program

This Vue component uses two custom directives. v-focus sets focus on the input when it appears. v-color changes the paragraph text color based on the textColor value. Clicking the button toggles the color between blue and green.

Vue

<template>
  <input v-focus />
  <p v-color="textColor">This text changes color.</p>
  <button @click="changeColor">Change Color</button>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'blue'
    };
  },
  methods: {
    changeColor() {
      this.textColor = this.textColor === 'blue' ? 'green' : 'blue';
    }
  },
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    },
    color: {
      mounted(el, binding) {
        el.style.color = binding.value;
      },
      updated(el, binding) {
        el.style.color = binding.value;
      }
    }
  }
};
</script>

Important Notes

Always clean up event listeners or timers in unmounted to avoid memory leaks.

Use binding.value to access the current value passed to the directive.

Directive hooks receive the element and useful info to control behavior precisely.

Summary

Directive hooks let you run code when a directive is added, updated, or removed.

mounted runs once when the directive attaches.

updated runs on data or element changes.

unmounted runs when the directive is removed, perfect for cleanup.

Practice

1. What does the mounted hook in a Vue directive do?

easy

A. Runs every time the component updates

B. Runs once when the directive is attached to the element

C. Runs when the directive is removed from the element

D. Runs only when the element is clicked

Solution

1. Step 1: Understand the purpose of mounted hook

   The mounted hook runs once when the directive is first attached to the element in the DOM.

2. Step 2: Compare with other hooks

   The updated hook runs on data or element changes, and unmounted runs when the directive is removed, so they do not match the description of mounted.

3. Final Answer:

   Runs once when the directive is attached to the element -> Option B

4. Quick Check:

   mounted = runs once on attach [OK]

Hint: Remember: mounted runs once when directive starts [OK]

Common Mistakes:

• Confusing mounted with updated hook
• Thinking mounted runs multiple times
• Mixing unmounted with mounted

2. Which of the following is the correct syntax to define the unmounted hook in a Vue directive?

easy

A. onUnmounted(el, binding) { /* code */ }

B. unmount(el, binding) { /* code */ }

C. destroyed(el, binding) { /* code */ }

D. unmounted(el, binding) { /* code */ }

Solution

1. Step 1: Recall the correct hook name

   The correct hook name for cleanup when a directive is removed is unmounted.

2. Step 2: Check syntax correctness

   The hook is defined as a function with parameters el and binding, so unmounted(el, binding) { /* code */ } is correct.

3. Final Answer:

   unmounted(el, binding) { /* code */ } -> Option D

4. Quick Check:

   Correct hook name is unmounted [OK]

Hint: Use exact hook names: unmounted, not unmount or destroyed [OK]

Common Mistakes:

• Using 'unmount' instead of 'unmounted'
• Confusing with lifecycle hooks like 'destroyed'
• Adding 'on' prefix incorrectly

3. Given this directive code, what will be logged when the bound element's text changes?

const myDirective = {
  mounted(el) {
    console.log('Mounted')
  },
  updated(el) {
    console.log('Updated')
  },
  unmounted(el) {
    console.log('Unmounted')
  }
}

medium

A. 'Mounted' then 'Updated' will log on text change

B. No logs will appear

C. 'Unmounted' will log on text change

D. Only 'Mounted' will log once

Solution

1. Step 1: Understand when each hook runs

   mounted runs once when directive attaches, updated runs on element or data changes, unmounted runs when directive is removed.

2. Step 2: Analyze the scenario

   When the element's text changes, the updated hook runs, so both Mounted (once) and Updated (on change) will log.

3. Final Answer:

   'Mounted' then 'Updated' will log on text change -> Option A

4. Quick Check:

   mounted once, updated on change [OK]

Hint: Updated logs on changes, mounted only once [OK]

Common Mistakes:

• Thinking updated runs only once
• Expecting unmounted to run on text change
• Ignoring mounted logs

4. Identify the error in this directive definition:

const directive = {
  mounted(el) {
    console.log('Mounted')
  },
  updated() {
    console.log('Updated')
  },
  unmounted(el) {
    console.log('Unmounted')
  }
}

medium

A. The mounted hook should not have parameters

B. The unmounted hook should be named 'destroyed'

C. The updated hook is missing the 'el' parameter

D. There is no error in this code

Solution

1. Step 1: Check parameters for each hook

   Directive hooks receive the element as the first parameter. The updated hook is missing the el parameter.

2. Step 2: Verify other hooks

   mounted and unmounted correctly have el parameter. The unmounted hook is correctly named.

3. Final Answer:

   The updated hook is missing the 'el' parameter -> Option C

4. Quick Check:

   All hooks need 'el' parameter [OK]

Hint: All directive hooks need 'el' parameter [OK]

Common Mistakes:

• Omitting parameters in hooks
• Confusing lifecycle hook names
• Assuming no parameters needed

5. You want to create a directive that adds a click event listener when attached and removes it when the directive is removed. Which hooks should you use to add and remove the listener?

hard

A. Add listener in mounted, remove in unmounted

B. Add listener in updated, remove in mounted

C. Add listener in unmounted, remove in updated

D. Add listener in updated, remove in updated

Solution

1. Step 1: Determine when to add event listener

   The listener should be added once when the directive attaches, so use mounted.

2. Step 2: Determine when to remove event listener

   Cleanup should happen when the directive is removed, so use unmounted to remove the listener.

3. Final Answer:

   Add listener in mounted, remove in unmounted -> Option A

4. Quick Check:

   mounted = add, unmounted = cleanup [OK]

Hint: Add in mounted, clean up in unmounted [OK]

Common Mistakes:

• Adding/removing listeners in updated hook
• Removing listener before adding it
• Using unmounted to add listener