Vue 13: Propiedades Computadas en Profundidad
easy⏱ 5 mincoursevue
Un computed con get y set
Pasa computed({ get, set }) en lugar de una función simple para crear un computed bidireccional: leerlo ejecuta get(), y asignar computed.value = x ejecuta set(x). Este es el patrón clásico para cosas como un input de moneda formateado que muestra un string pero escribe de vuelta un número, o — como en esta lección — un campo fullName combinado sobre dos refs separados firstName/lastName.
import { ref, computed } from 'vue';
const first = ref('Ada');
const last = ref('Lovelace');
const full = computed({
get: () => first.value + ' ' + last.value,
set: (val) => {
const parts = val.split(' ');
first.value = parts[0];
last.value = parts[1] || '';
},
});
full.value = 'Grace Hopper'; // runs set() -> updates first & last
Los valores computed se cachean
El get de un computed solo se vuelve a ejecutar cuando cambia una de sus dependencias rastreadas — leer .value varias veces seguidas entre cambios devuelve el resultado cacheado sin recalcular. Una función simple llamada desde la plantilla, en cambio, se reejecuta en cada re-render. Esta es la razón principal para preferir computed sobre un método siempre que derives un valor de estado reactivo.
Demuestra el cache, luego prueba el enlace bidireccional
Haz clic en leer dos veces y confirma que el contador de llamadas a get() solo sube en uno, no en dos — eso es el cache. Luego haz clic en set fullName y confirma que tanto firstName como lastName se actualizaron detrás de escena.