Qué son las Propiedades Computadas en Vue.js (Computed Properties)

Las propiedades computadas en Vue.js son parecidas a las propiedades normales (o datos), pero con una diferencia importante: su valor depende de otras propiedades. Esto significa que si una de esas propiedades cambia, la propiedad computada se actualiza automáticamente. Son reactivas, así que no hace falta que tú las actualices manualmente, Vue lo hace por ti.

Ejemplo 1

Imagina que estás creando una pequeña calculadora para saber cuánto pagarás por un producto con IVA incluido. En lugar de hacer el cálculo manual o en una función cada vez que cambien los valores, puedes usar una propiedad computada que se actualice automáticamente cuando cambie el precio o el porcentaje del IVA.
Así Vue se encarga de todo por ti, y tú solo te enfocas en mostrar el resultado.

<template>
  <h1>Calcular IVA(Impuesto al Valor Agregado)</h1>

  <label>Precio(sin IVA)</label>
  <input type="number" placeholder="precio" v-model="precio">
  <br>
  <label>Porcentaje del IVA(Ingresar numero entero)</label>
  <input type="number" placeholder="Porcentaje IVA" v-model="porcentajeIva">
  <br>
  <p><strong>Precio con IVA:</strong> {{ precioConIva }}</p>
</template>


<script setup>
import { ref, computed } from 'vue';

// Se define la propiedad `precio` como reactiva usando ref().
const precio = ref(0);
//Se define la propiedad `porcentajeIva` como reactiva usando ref().
const porcentajeIva = ref(0);

// La propiedad `precioConIva` es computed y recalcula su valor automáticamente
const precioConIva = computed(() => {

  //Se calcula el impuesto multiplicando el precio por la division del `porcentajeIva` entre 100 para obtener el valor en decimal
  const impuesto = precio.value*(porcentajeIva.value/100);
  //El resultado del precio con el IVA incluido 

  const resultado = precio.value+impuesto;
  return resultado; // Redondea a 2 decimales
});
</script>

Ejemplo 2

Supongamos que queremos calcular el promedio de tres notas: tareas, laboratorio y examen. Lo lógico sería sumar las tres y dividir entre 3, pero queremos que este promedio se actualice automáticamente cada vez que cambiemos alguna nota. Para eso, usamos una propiedad computada en Vue.js.

<template>
  <h1>Calcular Promedio</h1>

  <label>Tareas:</label>
  <input type="number" placeholder="Tareas" v-model="tareas">
  <br>

  <label>Laboratorio:</label>
  <input type="number" placeholder="Laboratorio" v-model="laboratorio">
  <br>

  <label>Examen:</label>
  <input type="number" placeholder="Examen" v-model="examen">
  <br>

  <p><strong>Promedio:</strong> {{ promedio }}</p>
</template>


<script setup>
import { ref, computed } from 'vue';

// Se definen las propiedades `tareas`,`laboratorio`,`examen` reactivas usando ref()
const tareas = ref(0);
const laboratorio = ref(0);
const examen = ref(0);

// La propiedad `promedio` es computed y recalcula su valor automáticamente
const promedio = computed(() => {
  const resultado = (tareas.value + laboratorio.value + examen.value) / 3;
  return resultado.toFixed(2); // Redondea a 2 decimales
});
</script>

Propiedades computadas vs métodos

las propiedades computadas y los métodos se escriben de diferente manera pero ellos funcionan de diferente manera.

Métodos:
Se ejecutan cuando son llamados, normalmente a través de un evento (como un clic o una acción del usuario). Esto significa que el cálculo o cambio de valor se hace de manera manual, ya que depende de que algo lo active.

<template>
  <h1>Calcular Promedio con Método</h1>

  <label>Tareas:</label>
  <input type="number" placeholder="Tareas" v-model="tareas">
  <br>

  <label>Laboratorio:</label>
  <input type="number" placeholder="Laboratorio" v-model="laboratorio">
  <br>

  <label>Examen:</label>
  <input type="number" placeholder="Examen" v-model="examen">
  <br>

  <button @click="calcularPromedio">Calcular Promedio</button>
  <p><strong>Promedio:</strong> {{ promedio }}</p>
</template>

<script setup>
import { ref } from 'vue';

const tareas = ref(0);
const laboratorio = ref(0);
const examen = ref(0);
const promedio = ref(0);

const calcularPromedio = () => {
  const resultado = (tareas.value + laboratorio.value + examen.value) / 3;
  promedio.value = resultado.toFixed(2);
};
</script>

En el ejemplo anterior, para obtener el promedio final, es necesario presionar el botón ‘Calcular Promedio’. Si no se ejecuta el método calcularPromedio(), no habrá ningún resultado. El promedio no se genera de forma automática, sino que requiere una acción del usuario para actualizarse.

Propiedades Computadas:
Por otro lado, las propiedades computadas son dinámicas: se actualizan automáticamente cada vez que cambia alguna de las propiedades de las que dependen.
Tomemos como ejemplo el cálculo del promedio: si cambiamos el valor de tareas, laboratorio o examen, el promedio se actualiza solo, sin necesidad de hacer clic en nada o llamar a una función. Vue se encarga de todo.

getters y setters en propiedades computadas

Normalmente, cuando usamos propiedades computadas en Vue, solo escribimos una función que devuelve un valor. Eso sería el getter. Pero también se puede agregar un setter, que nos permite actualizar datos cuando esa propiedad cambia.

Ejemplo

Imagínate que tienes el nombre y el apellido por separado, pero quieres mostrar el nombre completo y, además, poder cambiarlo desde un solo campo.
Con un get y un set, puedes hacer eso fácilmente: mostrar el nombre completo, y también actualizar el nombre y el apellido si alguien escribe un nuevo nombre completo.

<template>
  <h1>App</h1>
</template>

<script setup>
import { ref, computed } from 'vue'

// Se definen dos propiedades reactivas usando ref()
const nombre = ref('Jose')
const apellido = ref('Ramirez')

// La propiedad `nombreCompleto` es un computed con getter y setter
const nombreCompleto = computed({
  get() {
    // El getter nos permite obtener el valor de la propiedad,
    // en este caso, la concatenación de `nombre` y `apellido`
    return nombre.value + ' ' + apellido.value
  },
  set(nuevoNombre) {
    // Usamos la desestructuración de arrays para dividir `nuevoNombre`
    // y asignarlo a `nombre` y `apellido`
    [nombre.value, apellido.value] = nuevoNombre.split(' ')
  }
})

// Mostramos el nombre completo usando los valores iniciales
console.log(nombreCompleto.value) // "Jose Ramirez"

// Se asigna un nuevo nombre completo
nombreCompleto.value = 'Maria Garcia'

// Se imprime el nuevo nombre completo después del cambio
console.log(nombreCompleto.value) // "Maria Garcia"
</script>

Conclusión

Las propiedades computadas con getters y setters nos permiten manejar de manera sencilla valores derivados y a la vez tener control sobre cómo modificarlos. Son una herramienta poderosa cuando necesitamos que los datos se sincronicen automáticamente sin tener que escribir lógica adicional. Además, facilitan la interacción con los usuarios, permitiendo actualizar y mostrar información sin perder la claridad y simplicidad en el código.