Variables reactivas en Composition API de Vue.js

¿Qué es la Composition API y cómo iniciar su uso?

La Composition API de Vue.js es una alternativa poderosa que permite escribir componentes de una manera más flexible y organizada. A diferencia del Options API, que utiliza estructuras rígidas de objetos JSON, la Composition API permite el uso de funciones para definir la lógica y el estado de los componentes. Lo primero que necesitas saber es cómo utilizar variables reactivas dentro de esta API, empleando la función setup.

¿Cómo crear variables reactivas con ref?

La reactividad es un principio clave en Vue.js. Para empezar, es esencial entender cómo declarar variables reactivas mediante la función ref. Esta función permite crear una referencia reactiva a un dato, lo que significa que cualquier cambio a este dato se reflejará automáticamente en las partes del componente que lo usan.

Ejemplo de uso de ref

Para ilustrar cómo funciona ref, considera el siguiente componente:

import { ref } from 'vue';

export default {
  setup() {
    const texto = ref('Hola Vue');
    
    return { texto };
  }
}

• Creación de referencia reactiva: Declara una variable utilizando la función ref y asigna un valor inicial.
• Acceso a valores: En la función setup, utiliza la propiedad .value para leer o modificar los valores de estas variables reactivas.

¿Cómo hacer disponibles estas variables en el componente?

Las variables definidas con ref pueden utilizarse en el template del componente. No es necesario usar .value al acceder a ellas desde el template, ya que Vue.js detecta automáticamente los cambios. Por ejemplo:

<template>
  <div>{{ texto }}</div>
</template>

¿Cómo manejar las variables primitivas y los objetos reactivos?

Cuando se trata de valores de tipo primitivo (números, cadenas, booleanos), la función ref es suficiente. Sin embargo, para manejar objetos, es mejor usar la función reactive.

Uso de reactive para objetos

reactive nos permite definir variables reactivas que son objetos enteros, sin la necesidad de usar .value. Aquí un ejemplo práctico:

import { reactive } from 'vue';

export default {
  setup() {
    const contador = reactive({ valor: 0 });

    return { contador };
  }
}

¿Qué ventajas ofrece integrar Vanilla JS con setup?

La función setup no solo admite las funciones de Vue.js, sino que también permite el uso de Vanilla JS para cualquier lógica adicional. Esto proporciona mucha flexibilidad al combinar JavaScript puro con la reactividad de Vue.js.

Ejemplo con setInterval

Un caso común es el uso de setInterval para actualizar un contador:

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

    setInterval(() => {
      counter.value += 1;
    }, 500);

    return { counter };
  }
}

En este ejemplo, counter.value se incrementa automáticamente cada 500 milisegundos, mostrando la potencia de la reactividad en acción.

¿Por qué es importante elegir entre ref y reactive?

Elegir entre ref y reactive depende de tus necesidades específicas:

• ref: Ideal para valores simples y primitivos, donde la reactividad solo se necesita para un único valor.
• reactive: Perfecto para manejar objetos enteros y más complejos, eliminando la necesidad de acceder a propiedades con .value.

Aprender a usar adecuadamente estas herramientas te permitirá escribir componentes más eficientes y organizados, promoviendo un desarrollo ágil y mantenible en Vue.js. ¡Continúa explorando y experimentando para dominar Vue.js al máximo!