computed Propriedades computadas
Última atualização: 2026-10-22
computed Propriedades computadas
A opção computed declara valores derivados que recalculam e ficam em cache quando as dependências mudam — usados como propriedades comuns nos templates.
| Grupo | Opções: Estado |
|---|---|
| Tipo | Opção |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
export default {
data() { return { price: 10, qty: 2 } },
computed: {
total() { return this.price * this.qty }
}
}⚙️ Argumentos
| value | Um objeto cujas chaves são nomes de computadas e os valores são getters (ou pares get/set) |
|---|
Retorno：Lido como uma propriedade; em cache até as dependências mudarem
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows 'Total: 20' and recalculates on any input change.💡 Pontos-chave
💡 Dica Prefira computed a methods: computed faz cache, enquanto methods rodam a cada render.
⚠️ Aviso Sem efeitos colaterais dentro dos getters — é para isso que serve o watch.
ℹ️ Nota Use a forma get/set para valores computados graváveis, como nome completo.
🏷️ Estado relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Qual a diferença em relação a methods?
R computed faz cache por dependência; methods rodam a cada acesso.
P Por que não há parênteses nos templates?
R É lido como uma propriedade — this.total, não uma chamada.
P Pode depender de props?
R Sim — derivar de props é o padrão clássico.
