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.