Tutorial Vuejs: Ciclo de vida con Composition API

¿Qué es el Ciclo de Vida de un Componente?

El ciclo de vida de un componente en Vue describe las diferentes etapas por las que pasa un componente desde su creación hasta su destrucción. Estas etapas permiten a los desarrolladores ejecutar código en momentos específicos del ciclo de vida del componente, proporcionando un control preciso sobre el comportamiento del componente. En Vue 3, la Composition API introduce una forma más flexible y poderosa de manejar estos momentos del ciclo de vida.

El ciclo de vida de un componente incluye los siguientes estados principales:

• Creación: El componente es instanciado, pero aún no está montado en el DOM. En esta fase, se inicializan las propiedades reactivas y los métodos, pero el DOM aún no está disponible.
• Montaje: El componente se monta en el DOM. En esta fase, el DOM está disponible y se pueden realizar manipulaciones del DOM o iniciar efectos secundarios relacionados con el DOM.
• Actualización: El componente actualiza su estado reactivo o sus propiedades, lo que puede desencadenar una actualización del DOM.
• Desmontaje: El componente se elimina del DOM y se limpian los recursos asociados.

En la Composition API, los hooks de ciclo de vida se utilizan para ejecutar código en estos momentos específicos. A continuación, se describen algunos de los hooks más utilizados:

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // Código que se ejecuta después de que el componente se ha montado
      console.log('Componente montado');
    });

    onUnmounted(() => {
      // Código que se ejecuta antes de que el componente se desmonte
      console.log('Componente desmontado');
    });

    return {};
  }
};

En este ejemplo, onMounted es un hook que se ejecuta después de que el componente se ha montado en el DOM, mientras que onUnmounted se ejecuta justo antes de que el componente se desmonte. Estos hooks permiten a los desarrolladores gestionar tareas como la suscripción a eventos, la inicialización de datos o la limpieza de recursos.

Además de onMounted y onUnmounted, existen otros hooks que permiten realizar tareas en otros momentos del ciclo de vida, como onBeforeMount, onUpdated y onBeforeUnmount.

La utilización de estos hooks en la Composition API facilita la organización del código y mejora la reutilización de funcionalidades, ya que los hooks pueden ser definidos en funciones separadas y reutilizados en diferentes componentes.

Para comprender mejor cómo funcionan estos hooks y en qué momentos se ejecutan, es útil conocer el flujo general del ciclo de vida de un componente:

Creación del componente:

• setup(): Inicialización de propiedades reactivas y métodos.
• onBeforeMount(): Antes de montar el DOM.

Montaje del componente:

• onMounted(): Después de montar el DOM.

Actualización del componente:

• onBeforeUpdate(): Antes de actualizar el DOM.
• onUpdated(): Después de actualizar el DOM.

Desmontaje del componente:

• onBeforeUnmount(): Antes de desmontar el DOM.
• onUnmounted(): Después de desmontar el DOM.

Este flujo permite a los desarrolladores intervenir en los momentos clave del ciclo de vida del componente, mejorando el control y la gestión de los componentes en aplicaciones Vue.

Comparación de Composition API con la Options API

La Composition API y la Options API son dos enfoques para definir componentes en Vue. Aunque ambos permiten crear componentes funcionales y reactivos, tienen diferencias significativas en su uso y estructura.

• Declaración y organización del código: En la Options API, el código se organiza en secciones específicas dentro de un objeto de opciones (data, methods, computed, watch, etc.). Esto es útil para mantener una estructura clara, pero puede llevar a fragmentar la lógica relacionada en diferentes secciones. En la Composition API, toda la lógica relacionada se puede agrupar dentro de la función setup, lo que facilita la organización y la reutilización del código.

// Options API
export default {
  mounted() {
    console.log('Componente montado');
  }
};

// Composition API
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Componente montado');
    });
  }
};

• Reutilización de lógica: La Composition API permite crear funciones reutilizables que pueden ser compartidas entre componentes. Estas funciones, conocidas como composables, pueden encapsular y compartir lógica reactiva de manera eficiente. En la Options API, la reutilización de lógica suele ser más compleja y a menudo requiere mixins, que pueden llevar a conflictos de nombres y dificultades en la depuración.

// Composable function
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };

  return {
    count,
    increment
  };
}

// Component using the composable
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment
    };
  }
};

• Tipos y soporte de TypeScript: La Composition API tiene un mejor soporte para TypeScript comparado con la Options API. Al usar la Composition API, la tipificación es más directa y se integra mejor con el sistema de tipos de TypeScript, permitiendo una experiencia de desarrollo más robusta y con menos errores.

// Composition API with TypeScript
import { ref } from 'vue';

export default {
  setup() {
    const count = ref<number>(0);
    const increment = (): void => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

• Hooks de ciclo de vida: En la Options API, los hooks de ciclo de vida se definen como métodos dentro del objeto de opciones. En la Composition API, se importan y se utilizan dentro de la función setup, lo que permite un control más granular y una mayor flexibilidad en la gestión del ciclo de vida.

// Options API
export default {
  mounted() {
    console.log('Componente montado');
  },
  beforeUnmount() {
    console.log('Componente a punto de desmontarse');
  }
};

// Composition API
import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Componente montado');
    });

    onBeforeUnmount(() => {
      console.log('Componente a punto de desmontarse');
    });

    return {};
  }
};

• Legibilidad y estructura: La Options API puede resultar más legible y estructurada para quienes prefieren una clara separación de conceptos dentro de un objeto de opciones. La Composition API, por otro lado, ofrece una mayor flexibilidad y puede resultar más intuitiva para desarrolladores acostumbrados a patrones funcionales o a bibliotecas como React con hooks.

Ambos enfoques tienen sus ventajas y desventajas, y la elección entre ellos puede depender del contexto del proyecto, la preferencia del equipo de desarrollo y la necesidad de reutilización de lógica y tipado fuerte.

Lista de todos los hooks de ciclo de vida de API Composition

En Vue 3, la Composition API proporciona una serie de hooks de ciclo de vida que permiten a los desarrolladores ejecutar código en momentos específicos durante la vida de un componente. Estos hooks son funciones que se importan desde el paquete vue y se utilizan dentro de la función setup. A continuación se presenta una lista de todos los hooks de ciclo de vida disponibles en la Composition API y su uso:

• onBeforeMount: Se ejecuta justo antes de que el componente se monte en el DOM. Es útil para realizar preparaciones que deben ocurrir antes del montaje, pero después de la creación del componente.

import { onBeforeMount } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('El componente está a punto de montarse');
    });
  }
};

• onMounted: Se ejecuta después de que el componente ha sido montado en el DOM. Es ideal para inicializar efectos secundarios que dependen del DOM, como la integración de bibliotecas de terceros.

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('El componente ha sido montado');
    });
  }
};

• onBeforeUpdate: Se ejecuta justo antes de que el componente actualice el DOM. Es útil para realizar tareas antes de que el DOM se actualice en respuesta a cambios en el estado reactivo.

import { onBeforeUpdate } from 'vue';

export default {
  setup() {
    onBeforeUpdate(() => {
      console.log('El componente está a punto de actualizarse');
    });
  }
};

• onUpdated: Se ejecuta después de que el componente ha actualizado el DOM. Es útil para realizar tareas que dependen de la finalización de una actualización del DOM.

import { onUpdated } from 'vue';

export default {
  setup() {
    onUpdated(() => {
      console.log('El componente ha sido actualizado');
    });
  }
};

• onBeforeUnmount: Se ejecuta justo antes de que el componente sea destruido y eliminado del DOM. Es útil para realizar tareas de limpieza que deben ocurrir antes de que el componente se desmonte.

import { onBeforeUnmount } from 'vue';

export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('El componente está a punto de desmontarse');
    });
  }
};

• onUnmounted: Se ejecuta después de que el componente ha sido destruido y eliminado del DOM. Es ideal para limpiar recursos como suscripciones o temporizadores.

import { onUnmounted } from 'vue';

export default {
  setup() {
    onUnmounted(() => {
      console.log('El componente ha sido desmontado');
    });
  }
};

• onErrorCaptured: Se ejecuta cuando un error es capturado por un componente hijo durante su renderizado o en hooks de ciclo de vida. Permite manejar errores de manera global o específica.

import { onErrorCaptured } from 'vue';

export default {
  setup() {
    onErrorCaptured((err, instance, info) => {
      console.error('Error capturado:', err);
      return false; // Prevenir la propagación del error
    });
  }
};

• onRenderTracked: Se ejecuta cuando se realiza una operación de seguimiento de dependencias reactivas durante el renderizado del componente. Es útil para depuración y optimización del rendimiento.

import { onRenderTracked } from 'vue';

export default {
  setup() {
    onRenderTracked((e) => {
      console.log('Dependencia rastreada:', e);
    });
  }
};

• onRenderTriggered: Se ejecuta cuando una operación reactiva desencadena una re-renderización del componente. Es útil para entender qué cambios reactivaron el renderizado.

import { onRenderTriggered } from 'vue';

export default {
  setup() {
    onRenderTriggered((e) => {
      console.log('Renderización desencadenada por:', e);
    });
  }
};

Estos hooks proporcionan un control preciso sobre el comportamiento del componente en diferentes etapas de su ciclo de vida. Al utilizarlos correctamente, los desarrolladores pueden gestionar eficientemente las tareas de inicialización, actualización y limpieza, mejorando la robustez y mantenibilidad del código.

Uso de onMounted y uso de onUnmounted

onMounted y onUnmounted son hooks de ciclo de vida proporcionados por la Composition API en Vue 3. Estos hooks permiten ejecutar código en momentos específicos del ciclo de vida del componente, concretamente al montarse y desmontarse del DOM. Su uso es fundamental para tareas como la inicialización de datos, la suscripción a eventos o la limpieza de recursos.

onMounted se utiliza para ejecutar código después de que el componente ha sido montado en el DOM. Es útil para inicializar efectos secundarios que dependen del DOM, como la integración con bibliotecas de terceros, la manipulación del DOM o la realización de solicitudes de datos.

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('El componente ha sido montado');
      // Inicialización de bibliotecas de terceros o manipulación del DOM
    });

    return {};
  }
};

En este ejemplo, el mensaje "El componente ha sido montado" se registra en la consola justo después de que el componente se monta en el DOM. Aquí se pueden agregar otras tareas como la inicialización de gráficos, la configuración de eventos o la obtención de datos desde una API.

onUnmounted se utiliza para ejecutar código justo antes de que el componente sea destruido y eliminado del DOM. Es útil para limpiar recursos como suscripciones, temporizadores o cualquier otro recurso que deba ser liberado para evitar fugas de memoria.

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    let intervalId;

    onMounted(() => {
      intervalId = setInterval(() => {
        console.log('Intervalo ejecutado');
      }, 1000);
    });

    onUnmounted(() => {
      clearInterval(intervalId);
      console.log('El componente ha sido desmontado');
    });

    return {};
  }
};

En este ejemplo, se establece un intervalo cuando el componente se monta y se limpia el intervalo cuando el componente se desmonta. Esto asegura que no queden intervalos activos que puedan consumir recursos innecesariamente después de que el componente haya sido eliminado.

El uso combinado de onMounted y onUnmounted permite una gestión eficiente del ciclo de vida de los componentes, asegurando que los recursos se inicialicen y limpien adecuadamente. Es común utilizar estos hooks para tareas como:

• Suscripción y desuscripción a eventos del DOM o de bibliotecas de terceros.
• Inicialización y limpieza de temporizadores o intervalos.
• Establecimiento y finalización de conexiones a servicios externos.
• Gestión de recursos que deben ser liberados al desmontar el componente.

Estos hooks son esenciales para mantener el código limpio y evitar problemas de desempeño relacionados con la acumulación de recursos no gestionados correctamente. Al utilizar onMounted y onUnmounted, los desarrolladores pueden asegurar que sus componentes sean eficientes y robustos, manejando adecuadamente las tareas de inicialización y limpieza durante el ciclo de vida del componente.