REACTIVIDAD COMPUTED CON VUEJS

En VueJS, las propiedades computed son una herramienta clave para manejar datos derivados de forma reactiva en la Composition API. Una propiedad computed es un valor calculado que depende de una o más variables reactivas (como las creadas con ref o reactive). Cuando las variables reactivas cambian, el valor de la propiedad computed se recalcula automáticamente, y la interfaz se actualiza si es necesario. Se importa desde Vue: "import { computed } from 'vue'". Se define con una función que retorna el valor calculado. Vue rastrea las dependencias reactivas usadas dentro de la función computed y las actualiza solo cuando cambian.

Características clave

  • Dependencias reactivas: Solo se recalcula si cambian las variables reactivas de las que depende.
  • Caché: Los valores computed se almacenan en caché, lo que los hace más eficientes que recalcular valores en métodos.
  • Solo lectura por defecto: No puedes modificar directamente una propiedad computed a menos que definas un getter y un setter.
Las ventajas de computed son la eficiencia ya que solo se recalculan cuando cambian sus dependencias reactivas, limpieza ya que simplifican el código al manejar lógica derivada sin necesidad de métodos redundantes y reactividad automática ya que se integran perfectamente con reactive o ref para mantener la UI actualizada.

Cuándo usar computed

  • Usar computed para valores derivados que dependen de datos reactivos (por ejemplo, cálculos, formateo de datos, filtrado de listas).
  • Usar métodos para acciones que no dependen de datos reactivos o que ejecutan lógica imperativa (como enviar datos a una API).
Ejemplo:

 <div id="app">
    <h1>Formulario de usuario</h1>
    <input v-model="user.firstName" placeholder="Nombre" />
    <input v-model="user.lastName" placeholder="Apellido" />
    <p>Nombre completo: {{ fullName }}</p>
    <p>Saludo: {{ greeting }}</p>
    <button @click="reset">Reiniciar</button>
  </div>

  <script>
    const { createApp, reactive, computed } = Vue;

    createApp({
 setup() {
   // Objeto reactivo
   const user = reactive({
     firstName: '',
     lastName: ''
   });

   // Propiedad computed para el nombre completo
   const fullName = computed(() => {
     return `${user.firstName} ${user.lastName}`.trim() || 'Sin nombre';
   });

   // Propiedad computed para un saludo dinámico
   const greeting = computed(() => {
     return user.firstName ? `¡Hola, ${user.firstName}!` : 'Ingresa un nombre';
   });

   // Método para reiniciar
   const reset = () => {
     user.firstName = '';
     user.lastName = '';
   };

   // Exponemos las variables al template
   return {
     user,
     fullName,
     greeting,
     reset
   };
 }
    }).mount('#app');
  </script>

Explicación del ejemplo

  • Objeto reactive:user es un objeto reactivo con las propiedades firstName y lastName. Los inputs usan v-model para modificar estas propiedades reactivamente.
  • Propiedades computed: fullName: Calcula el nombre completo combinando user.firstName y user.lastName. Si ambos están vacíos, retorna "Sin nombre". greeting: Genera un saludo personalizado basado en user.firstName. Si está vacío, muestra un mensaje por defecto. Ambas propiedades se actualizan automáticamente cuando cambian las propiedades de user.
  • Método reset: Restablece las propiedades de user, lo que desencadena la actualización de fullName y greeting.
  • Template: Muestra los valores de fullName y greeting, que se actualizan reactivamente. Los inputs modifican el objeto user, y Vue se encarga de reflejar los cambios en el DOM.

Cómo probarlo

  • Copia el código en un archivo ".html".
  • Ábrelo en un navegador.
  • Escribe en los campos de nombre y apellido, y observa cómo fullName y greeting se actualizan automáticamente.
  • Haz clic en "Reiniciar" para ver cómo se restablecen los valores.