A reatividade do Vue 3 é construída em Proxies JavaScript. Quando você torna o estado reativo, o Vue o envolve em um Proxy que intercepta leituras e escritas, permite rastrear quais efeitos dependem de quais propriedades e ativa esses efeitos para serem executados novamente quando os dados mudam.
() {
(target, {
() {
(obj, key);
obj[key];
},
() {
obj[key] = value;
(obj, key);
;
},
});
}
Ler uma propriedade rastreia o efeito em execução atual como uma dependência; escrever nela ativa todos os efeitos que a leem. É assim que o Vue sabe exatamente qual componente deve renderizar ou quais computeds devem ser atualizados quando uma propriedade específica muda.
// component render, computed, and watchers all run inside an "effect"
effect(() => {
document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
Quando um efeito é executado, o Vue o marca como "ativo" para que qualquer leitura reativa durante sua execução seja vinculada de volta a ele. Mude uma dependência depois, e apenas os efeitos afetados são executados novamente.
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1; // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5; // ❌ index assignment
this.arr.length = 0; // ❌ length changes
// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
Proxies interceptam o objeto inteiro (qualquer chave, adições, exclusões, mutações de array), eliminando as limitações bem conhecidas do Vue 2 — sem mais workarounds com Vue.set.
reactive(obj) → returns a Proxy of the object
ref(value) → returns an object { value } whose .value access is tracked
(so primitives can be reactive — Proxies only wrap objects)
Compreender o modelo Proxy track/trigger explica por que Vue é tão eficiente (ele atualiza apenas os efeitos que realmente dependem de dados alterados — reatividade de granularidade fina) e por que as antigas limitações do Vue 2 existiam e desapareceram no Vue 3.
Também esclarece regras práticas: por que reactive precisa de objetos (Proxies não podem envolver primitivos, daí ref), e por que desestruturar um reactive quebra o rastreamento (você desvincula o valor da interceptação get/set do Proxy).