reactive() Criar um proxy reativo de objeto
Última atualização: 2026-10-22
reactive() Criar um proxy reativo de objeto
reactive() envolve um objeto ou array em um proxy reativo profundo — ler e escrever propriedades dispara atualizações diretamente.
| Grupo | Reatividade: Essencial |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const state = reactive({ count: 0 })
state.count++ // leitura/escrita direta, sem .value⚙️ Argumentos
| target | Um objeto, array ou coleção como Map/Set |
|---|
Retorno：Um proxy reativo do objeto original; ambos compartilham os mesmos dados
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows 'Count: 0'; each click increments it.💡 Pontos-chave
⚠️ Aviso Vale apenas para objetos/arrays: passar um primitivo (número, string) perde a reatividade — nesse caso use ref().
⚠️ Aviso Desestruturar quebra a reatividade: const { count } = state devolve um número comum; use toRefs(state) ou mantenha state.count.
ℹ️ Nota Substituir o objeto inteiro (state = reactive({})) corta o vínculo do proxy original; ref aceita substituição completa, reactive não.
🏷️ Essencial relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P reactive ou ref — qual usar?
R Por padrão, recomenda-se ref: qualquer tipo, substituível, seguro ao desestruturar. Use reactive quando o estado em estilo de objeto (state.xxx) for mais legível.
P Por que alterar state.xxx atualiza a página?
R O reactive usa Proxy para interceptar leituras e escritas de propriedades: coleta dependências na leitura e notifica atualizações na escrita.
P Qual a relação entre o objeto do reactive e o objeto original?
R São os mesmos dados: alterar o proxy é alterar o objeto original; o proxy apenas adiciona o rastreamento de reatividade.
