LuisLlamas Logo
ES
vuejs-directivas-personalizadas

Cómo crear directivas personalizadas en Vue.js

  • 3 min
  • Avanzado

Además de las directivas incorporadas, Vue.js nos permite crear nuestras propias directivas personalizadas.

En general, no es algo que tengamos que hacer con frecuencia. Vue está pensado para manipular el DOM usando sus propios mecanismos.

Pero en ocasiones puede resultar útil, cuando necesitamos manipular el DOM de una manera específica que no está cubierta por las directivas estándar.

Así que vamos a ver cómo crear nuestras propias directivas y, sobre todo, cuando conviene (y cuando no) hacerlo.

Crear una directiva personalizada

Crear una directiva personalizada en Vue es muy sencillo. Simplemente es un objeto que contiene hooks (ganchos) que se ejecutan en diferentes momentos del ciclo de vida del elementos.

Los hooks más comunes para crear directivas personalizadas son:

  • mounted: Se ejecuta cuando el elemento se inserta en el DOM.
  • updated: Se ejecuta cuando el elemento se actualiza.
  • unmounted: Se ejecuta cuando el elemento se elimina del DOM.

Vimos los hooks y el ciclo de vida del componentes en Ciclo de vida de componentes en Vue.js

Ejemplo básico

Vamos a verlo mejor con un ejemplo. Supongamos que queremos crear una directiva personalizada llamada v-resaltar, que cambie el color de fondo de un elemento cuando se hace clic en él.

<template>
  <p v-resaltar>Haz clic aquí para resaltar</p>
</template>

<script setup>
import { ref } from 'vue';

const vResaltar = {
  mounted(el) {
    el.style.cursor = 'pointer';
    el.addEventListener('click', () => {
      el.style.backgroundColor = 'yellow';
    });
  },
  unmounted(el) {
    el.removeEventListener('click', () => {});
  }
};
</script>

En este ejemplo,

  • La directiva v-resaltar añade un evento de clic al elemento que cambia su color de fondo.
  • Además, limpia el evento cuando el elemento se elimina del DOM.

Cuando usar una directiva

En general, es preferible no crear nuestras propias directivas, si podemos resolverlo con los mecanismos estándard de Vue.js. 😊

Debemos reservalo a casos complejos, o casos donde necesitas reutilizar la lógica (por ejemplo, en librerías de componentes o herramientas).

Las directivas son adecuadas cuando,

  1. Necesitas manipular el DOM directamente: Por ejemplo, añadir eventos, modificar estilos, o interactuar con librerías externas
  2. Quieres reutilizar la lógica en varios componentes
  3. La lógica es específica del DOM: Si estás trabajando con elementos HTML (y no con el estado de la aplicación)

Las directivas no son adecuadas cuando,

  1. La lógica puede manejarse con el sistema reactivo de Vue: Si puedes lograr lo mismo con v-bind, v-on, o clases dinámicas, es mejor evitar una directiva
  2. La lógica es compleja: Las directivas son más difíciles de depurar y mantener

Mismo ejemplo sin directiva

Para verlo, vamos a ver el mismo ejemplo de v-resaltar pero sin una directiva, usando las herramientas reactivas de Vue. Quedaría algo así,

<template>
  <p 
    :class="{ highlighted: isHighlighted }" 
    @click="toggleHighlight"
    style="cursor: pointer;"
  >
    Haz clic aquí para resaltar
  </p>
</template>

<script setup>
import { ref } from 'vue';

const isHighlighted = ref(false);

function toggleHighlight() {
  isHighlighted.value = !isHighlighted.value;
}
</script>

<style>
.highlighted {
  background-color: yellow;
  transition: background-color 0.3s;
}
</style>

En esta página