API de opções: data methods computed
Defina dados reativos, escreva métodos chamados pelo template e use propriedades computadas para valores derivados que são atualizados automaticamente.
API de opções: data methods computed é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é a API de opções
A API de opções organiza a lógica do componente por tipo de opção: data (estado reativo), methods (funções), computed (estado derivado), watch (efeitos colaterais) e ganchos do ciclo de vida. Cada um fica em uma propriedade de objeto nomeada.
A opção data
Retorna um objeto de propriedades reativas. Todas as propriedades declaradas em data() são reativas — o Vue as observa e renderiza novamente o template quando elas mudam.
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}A opção methods
Funções que podem ser chamadas a partir do template ou de outros métodos. Dentro dos métodos, this refere-se à instância do componente e fornece acesso aos dados e às propriedades calculadas.
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}A opção computed
As propriedades calculadas derivam valores de dados reativos. Elas ficam armazenadas em cache — só são recalculadas quando suas dependências mudam. Utilize-as em vez de métodos para valores derivados, evitando recálculos desnecessários.
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}Propriedades calculadas graváveis
Uma propriedade calculada pode ter get e set para se tornar gravável — isso é útil para vinculações bidirecionais com v-model.
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}A opção watch
Os observadores executam efeitos colaterais quando uma propriedade reativa muda. Utilize-os para operações assíncronas acionadas por mudanças nos dados, como buscar dados quando um termo de pesquisa muda.
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Ganchos do ciclo de vida na API de opções
Declare os ganchos do ciclo de vida como métodos: created, mounted, updated, unmounted. created é executado antes de o DOM estar pronto. mounted é executado depois que o componente está no DOM.
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}Acesso ao template: $refs
Adicione um atributo ref a um elemento do template e acesse o elemento do DOM ou o componente filho por meio de this.$refs.name nos métodos. Disponível depois da montagem.
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins versus API de composição
A API de opções tem mixins para compartilhar lógica entre componentes. Na API de composição, os mixins foram em grande parte substituídos por composables — eles são mais difíceis de analisar e apresentam problemas de colisão de nomes. Prefira a API de composição para código novo.
API de opções versus API de composição
A API de opções é excelente para componentes pequenos e médios e é mais fácil de aprender para iniciantes. A API de composição (setup() /