toRefs() Converter um objeto em uma família de refs
Última atualização: 2026-10-22
toRefs() Converter um objeto em uma família de refs
toRefs() converte cada propriedade de um objeto reativo em um ref, preservando a reatividade após a desestruturação — é a forma padrão de desestruturar estado reactive.
| Grupo | Reatividade: Utilitários |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const state = reactive({ a: 1, b: 2 })
const { a, b } = toRefs(state) // a e b são refs, ainda sincronizados com state
a.value++ // state.a também incrementa⚙️ Argumentos
| object | Um objeto reativo (proxy reactive) |
|---|
Retorno：Um objeto comum mapeando nome de propriedade → ref
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Both numbers move together — the destructured ref stays linked.💡 Pontos-chave
💡 Dica Ao retornar estado reactive de um composable, use toRefs: assim quem chama pode desestruturar e usar com segurança.
⚠️ Aviso Só faz sentido para objetos reactive: chamar sobre um objeto comum devolve refs-retrato independentes entre si.
ℹ️ Nota O objeto retornado por toRefs no setup do componente pode ser usado diretamente no template (desembrulhado automaticamente).
🏷️ Utilitários relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P O que acontece se desestruturar sem toRefs?
R Você obtém o valor-retrato daquele momento; mudanças seguintes no objeto de origem não se refletem e a view não atualiza.
P Dá para usar sobre um ref?
R Não é adequado: um ref já é uma unidade reativa — use-o diretamente ou extraia o valor com unref.
P Depois de desestruturar, as alterações são escritas de volta no objeto de origem?
R Sim, porque é um canal bidirecional para a mesma propriedade.
