data Estado do componente
Última atualização: 2026-10-22
data Estado do componente
A opção data declara o estado reativo do componente como uma função que retorna um objeto, para que cada instância tenha sua própria cópia.
| 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 { count: 0, user: { name: "Ana" } }
}
}⚙️ Argumentos
| value | Sem argumentos: uma função que retorna os dados iniciais (objeto apenas para a instância raiz) |
|---|
Retorno：Os campos retornados tornam-se reativos e são usados pelo nome nos templates
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows 'Count: 0'; clicking increments it.💡 Pontos-chave
⚠️ Aviso Sempre uma função — um objeto compartilhado vaza estado entre instâncias.
ℹ️ Nota Todos os campos retornados tornam-se profundamente reativos, incluindo objetos e arrays aninhados.
💡 Dica Chaves que começam com _ ou $ não são expostas na instância.
🏷️ Estado relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que data deve ser uma função?
R Componentes são instanciados repetidamente; a função retorna estado novo a cada vez.
P O data pode referenciar props?
R Não de forma confiável — derive de props com computed.
P Os templates precisam de this?
R Não — os templates usam nomes diretos; a lógica no script usa this.
