Vuejs: Composición y reactividad

Vue 3.5 introduce un sistema de composición y reactividad que permite a los desarrolladores crear aplicaciones más modulares y eficientes. Este módulo se centra en cómo utilizar estas características para mejorar la estructura y el rendimiento de tus aplicaciones.

Composición en Vue 3.5

La API de composición de Vue 3.5 permite organizar el código de una manera más modular. Esta API es una alternativa al sistema basado en opciones y se utiliza principalmente para mejorar la reutilización del código y la legibilidad.

Uso de setup

La función setup es el punto de entrada para la API de composición. Se ejecuta antes de que el componente sea creado y proporciona acceso a las propiedades reactivas y a las funciones del ciclo de vida.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

En este ejemplo, usamos ref para crear una propiedad reactiva count. La función increment permite modificar esta propiedad. Ambas se devuelven desde setup y se pueden utilizar en la plantilla del componente.

Composición reutilizable con composables

Los composables son funciones que encapsulan lógica reutilizable. Permiten compartir funcionalidades entre diferentes componentes.

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return {
    count,
    increment
  };
}

// MyComponent.vue
import { useCounter } from './useCounter';

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

    return {
      count,
      increment
    };
  }
};

Aquí, useCounter es un composable que se puede utilizar en cualquier componente para añadir la funcionalidad de conteo.

Reactividad en Vue 3.5

El sistema de reactividad de Vue 3.5 se basa en proxies y proporciona una manera eficiente de rastrear y reaccionar a los cambios en los datos.

Proyectos reactivos con reactive

La función reactive convierte un objeto en reactivo, lo que significa que Vue rastreará las dependencias y actualizará la interfaz de usuario cuando cambien.

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increment() {
      state.count++;
    }

    return {
      state,
      increment
    };
  }
};

En este ejemplo, state es un objeto reactivo que contiene la propiedad count. La función increment modifica esta propiedad y Vue se encarga de actualizar la interfaz de usuario.

Computed properties

Las propiedades computadas permiten definir valores derivados de otras propiedades reactivas.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
};

doubleCount es una propiedad computada que se actualiza automáticamente cuando cambia count.

Watchers

Los watchers permiten ejecutar lógica personalizada en respuesta a los cambios de una propiedad reactiva.

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

En este ejemplo, el watcher se activa cada vez que count cambia, permitiendo ejecutar lógica adicional en respuesta a esos cambios.