El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos sobre dos características poderosas de Vue.js: las propiedades computadas (computed properties) y los observadores (watchers). Estas herramientas nos permiten manejar y reaccionar a los cambios en los datos de manera eficiente y declarativa.

Propiedades Computadas

¿Qué son las Propiedades Computadas?

Las propiedades computadas son propiedades que se calculan en función de otras propiedades reactivas. Se utilizan para realizar cálculos complejos y devolver un valor basado en el estado actual de la instancia de Vue.

Ventajas de las Propiedades Computadas

Cacheo Automático: Las propiedades computadas se almacenan en caché en función de sus dependencias reactivas. Solo se recalculan cuando una de sus dependencias cambia.
Sintaxis Declarativa: Permiten escribir lógica de manera declarativa, lo que hace que el código sea más fácil de leer y mantener.

Ejemplo de Propiedad Computada

<div id="app">
  <p>Nombre completo: {{ fullName }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      firstName: 'Juan',
      lastName: 'Pérez'
    },
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  });
</script>

En este ejemplo, fullName es una propiedad computada que concatena firstName y lastName. Se recalculará automáticamente cuando cualquiera de estas dos propiedades cambie.

Ejercicio Práctico

Ejercicio: Crea una instancia de Vue con dos propiedades a y b. Añade una propiedad computada sum que devuelva la suma de a y b.

Solución:

<div id="app">
  <p>Suma: {{ sum }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      a: 5,
      b: 10
    },
    computed: {
      sum() {
        return this.a + this.b;
      }
    }
  });
</script>

Observadores

¿Qué son los Observadores?

Los observadores (watchers) son funciones que se ejecutan en respuesta a cambios en una propiedad específica. Son útiles para realizar operaciones asíncronas o costosas en respuesta a cambios en los datos.

Ventajas de los Observadores

Reacción a Cambios: Permiten ejecutar lógica personalizada cuando una propiedad cambia.
Flexibilidad: Son ideales para operaciones que no se pueden realizar de manera declarativa con propiedades computadas.

Ejemplo de Observador

<div id="app">
  <p>Mensaje: {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hola'
    },
    watch: {
      message(newValue, oldValue) {
        console.log(`El mensaje cambió de "${oldValue}" a "${newValue}"`);
      }
    }
  });
</script>

En este ejemplo, el observador message se ejecuta cada vez que la propiedad message cambia, registrando el cambio en la consola.

Ejercicio Práctico

Ejercicio: Crea una instancia de Vue con una propiedad count. Añade un observador que registre en la consola cada vez que count cambie.

Solución:

<div id="app">
  <p>Contador: {{ count }}</p>
  <button @click="count++">Incrementar</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      count: 0
    },
    watch: {
      count(newValue, oldValue) {
        console.log(`El contador cambió de ${oldValue} a ${newValue}`);
      }
    }
  });
</script>

Resumen

En esta sección, hemos aprendido sobre las propiedades computadas y los observadores en Vue.js. Las propiedades computadas nos permiten realizar cálculos basados en el estado actual de la instancia de Vue de manera eficiente y declarativa, mientras que los observadores nos permiten reaccionar a cambios en los datos de manera flexible y personalizada.

Conceptos Clave

Propiedades Computadas: Se utilizan para realizar cálculos basados en otras propiedades reactivas y se almacenan en caché automáticamente.
Observadores: Son funciones que se ejecutan en respuesta a cambios en una propiedad específica, ideales para operaciones asíncronas o costosas.

Con estos conocimientos, estamos listos para avanzar al siguiente tema: Vinculación de Clases y Estilos.

Propiedades Computadas y Observadores