Vue 12: Fundamentos de la Reactividad
easy⏱ 5 mincoursevue
Proxies: track y trigger
Cada lectura de propiedad que ocurre mientras se ejecuta un getter de computed o una función watchEffect queda registrada como dependencia de ese efecto. Cuando luego escribes en una de esas propiedades rastreadas — incluso mediante una asignación simple como state.quantity++ — la trampa set del Proxy de Vue se dispara, busca qué efectos dependen de esa propiedad, y los vuelve a ejecutar. Este grafo de dependencias se reconstruye en cada ejecución, así que se adapta automáticamente si tu código toma una rama distinta.
import { reactive, computed, watchEffect } from 'vue';
const state = reactive({ a: 1, b: 2 });
// Reading state.a and state.b here TRACKS both as dependencies.
const sum = computed(() => state.a + state.b);
watchEffect(() => {
console.log('sum is now', sum.value); // re-runs whenever sum changes
});
state.a = 10; // TRIGGERS: sum recomputes, watchEffect logs again
Son las trampas get/set del Proxy, no polling
Vue nunca hace polling ni compara (diff) tus datos para detectar cambios — eso sería lento e impreciso. La trampa get del Proxy hace el tracking en el momento de la lectura, y su trampa set hace el triggering en el momento de la escritura, ambas de forma síncrona y exacta. Por eso la mutación de objetos/arrays simples (push, splice, asignación directa de propiedades) simplemente funciona con reactive(), a diferencia de patrones más antiguos que requieren actualizaciones inmutables.
Rastrea la cadena de reactividad
Ejecuta la demo y haz clic en +1 cantidad varias veces. Luego agrega también un botón state.price++, y confirma que ambos botones activan el MISMO computed y el MISMO watch — porque ambas propiedades son dependencias de total.