shallowReactive() Objeto reativo superficial
Última atualização: 2026-10-22
shallowReactive() Objeto reativo superficial
shallowReactive() deixa reativas apenas as propriedades do primeiro nível do objeto; objetos aninhados permanecem como estão (sem proxy).
| Grupo | Reatividade: Avançado |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const state = shallowReactive({ count: 0, nested: { a: 1 } })
state.count++ // ✅ dispara
state.nested.a++ // ❌ não dispara⚙️ Argumentos
| target | Objeto (só as propriedades próprias recebem proxy) |
|---|
Retorno：Um proxy reativo superficial
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
The top-level button updates the number; the nested one changes data without refreshing the view.💡 Pontos-chave
ℹ️ Nota O cenário é parecido com o do shallowRef: grandes estruturas de estado que só precisam de reatividade no primeiro nível.
⚠️ Aviso A view não atualizar ≠ os dados não mudaram: os dados nos níveis aninhados na verdade mudaram, apenas não dispararam a renderização — é uma armadilha comum.
🏷️ Avançado relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P A diferença de reactive é só desempenho?
R Não apenas: o comportamento também é diferente (aninhados não são reativos) — é uma diferença semântica, não um simples interruptor de otimização.
P Objetos aninhados ainda podem ser observados?
R É preciso observar explicitamente o objeto original com deep, ou envolvê-lo com um ref profundo, para perceber as mudanças.
P Por que esse API existe?
R Para fornecer um invólucro reativo de baixo custo sobre dados grandes/externos, evitando o custo do proxy recursivo.
