computed() Criar uma propriedade computada
Última atualização: 2026-10-22
computed() Criar uma propriedade computada
computed() deriva um valor a partir de outro estado reativo e o armazena em cache: recalcula apenas quando uma dependência muda.
| Grupo | Reatividade: Essencial |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const doubled = computed(() => count.value * 2)
// propriedade computada gravável
const full = computed({
get: () => first.value + " " + last.value,
set: (v) => { [first.value, last.value] = v.split(" ") }
})⚙️ Argumentos
| getter | Uma função getter (ou um objeto com get/set) que lê outro estado reativo |
|---|
Retorno：Um objeto ComputedRef somente leitura (ou gravável)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows 'Total: 20' by default; editing either input recalculates the total instantly.💡 Pontos-chave
💡 Dica Tem cache: se vários lugares usam o mesmo computed, ele calcula apenas uma vez; já os methods são executados novamente a cada renderização.
⚠️ Aviso Não coloque efeitos colaterais no getter de um computed (como requisições ou alterar outro estado) — esse é o papel do watch.
ℹ️ Nota Só funciona se depender de fontes realmente reativas: sem dados reativos nas dependências, o resultado nunca é atualizado.
🏷️ Essencial relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Devo usar computed ou methods?
R Derivação a partir de dados reativos com resultado reutilizável → computed (com cache); chamadas com parâmetros ou execução a cada vez (como eventos) → função comum.
P Posso atribuir valor diretamente a um computed?
R Por padrão é somente leitura e atribuir valor gera um aviso. Para torná-lo gravável, use a forma { get, set }.
P Posso escrever código assíncrono dentro de um computed?
R Não: o computed precisa retornar o valor de forma síncrona; lógica de derivação assíncrona deve usar watch + ref.
