Composition API
O Composition API no Vue.js é uma abordagem moderna para estruturar a lógica de componentes de forma mais modular e reutilizável. Diferente do Options API, que organiza propriedades e métodos em blocos separados, o Composition API concentra o estado, métodos e efeitos colaterais dentro da função setup(), permitindo maior clareza e escalabilidade em aplicações complexas. Esta abordagem é especialmente útil em projetos grandes, onde a reutilização de lógica entre componentes se torna essencial.
Ao utilizar o Composition API, os desenvolvedores podem explorar conceitos avançados de Vue.js, como reatividade com ref e reactive, propriedades derivadas com computed, e observação de mudanças com watch. Além disso, é possível implementar algoritmos eficientes, estruturas de dados complexas e princípios de programação orientada a objetos (OOP) diretamente dentro do setup(), promovendo um código mais organizado e testável.
Neste tutorial, você aprenderá a gerenciar estado reativo, criar funções reutilizáveis (Composables), otimizar desempenho e evitar armadilhas comuns, como vazamentos de memória e manipulação inadequada de dados. O conteúdo é contextualizado dentro do desenvolvimento de software e arquitetura de sistemas, permitindo que você aplique estas técnicas de forma prática em projetos reais de Vue.js.
Exemplo Básico
textimport { createApp, ref, computed } from 'vue'
const App = {
setup() {
const contador = ref(0)
const incrementar = () => {
contador.value++
}
const contadorDobrado = computed(() => contador.value * 2)
return {
contador,
incrementar,
contadorDobrado
}
},
template: ` <div> <h1>Contador: {{ contador }}</h1> <h2>Contador Dobrado: {{ contadorDobrado }}</h2> <button @click="incrementar">Incrementar</button> </div>
`
}
createApp(App).mount('#app')Neste exemplo, setup() é o ponto central do Composition API. O contador é definido como uma referência reativa usando ref, permitindo que seu valor seja atualizado e refletido automaticamente no template. A função incrementar altera o estado de contador, enquanto contadorDobrado é uma propriedade computada que recalcula automaticamente o valor dobrado sempre que contador muda.
O return dentro do setup() expõe essas variáveis e funções para o template, demonstrando a modularidade e a clareza que o Composition API proporciona. É importante entender o uso de .value para acessar ou modificar refs, bem como a diferença entre ref e reactive para objetos complexos. Este padrão promove código testável, reutilizável e fácil de manter em aplicações Vue.js de grande escala.
Exemplo Prático
textimport { createApp, reactive, watch } from 'vue'
const App = {
setup() {
const estado = reactive({
tarefas: [],
novaTarefa: ''
})
const adicionarTarefa = () => {
if (estado.novaTarefa.trim() !== '') {
estado.tarefas.push({ texto: estado.novaTarefa, concluida: false })
estado.novaTarefa = ''
}
}
watch(() => estado.tarefas.length, (novo, antigo) => {
console.log(`Número de tarefas mudou: ${antigo} → ${novo}`)
})
const removerTarefa = (indice) => {
estado.tarefas.splice(indice, 1)
}
return {
estado,
adicionarTarefa,
removerTarefa
}
},
template: ` <div> <h1>Lista de Tarefas</h1> <input v-model="estado.novaTarefa" placeholder="Adicionar nova tarefa" /> <button @click="adicionarTarefa">Adicionar</button> <ul> <li v-for="(tarefa, indice) in estado.tarefas" :key="indice">
{{ tarefa.texto }} <button @click="removerTarefa(indice)">Remover</button> </li> </ul> </div>
`
}
createApp(App).mount('#app')Este exemplo demonstra gerenciamento de tarefas dinâmicas com reactive, permitindo que o objeto estado seja reativo. As funções adicionarTarefa e removerTarefa manipulam o array de tarefas com validação adequada, evitando inconsistências. O watch observa mudanças no tamanho do array e registra no console, demonstrando execução de efeitos colaterais reativos.
Este padrão segue princípios de OOP e modularidade, permitindo futura extração para Composables. Evita manipulação direta do DOM e garante que watch seja limpo corretamente para prevenir vazamentos de memória, alinhando-se às melhores práticas de Vue.js em performance e manutenção.
Melhores práticas incluem escolher corretamente entre ref e reactive, usar computed e watch de forma segura, e tratar erros com try/catch dentro do setup(). Para depuração, Vue Devtools é essencial. Para otimização de performance, use lazy evaluation e evite operações pesadas dentro de watch ou computed. Segurança do estado e validação de entrada de usuários são importantes para prevenir bugs e inconsistências em aplicações Vue.js complexas.
📊 Tabela de Referência
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| ref | Define uma variável reativa simples | const count = ref(0) |
| reactive | Define um objeto ou array reativo | const estado = reactive({ nome: '', idade: 0 }) |
| computed | Propriedade derivada reativa | const dobro = computed(() => count.value * 2) |
| watch | Observa mudanças e executa efeitos colaterais | watch(() => estado.tarefas.length, (novo) => console.log(novo)) |
| setup | Função central do Composition API | setup() { const data = ref(0); return { data } } |
O Composition API permite gerenciar de forma eficiente a reatividade, propriedades computadas e observação de mudanças, promovendo componentes escaláveis, limpos e reutilizáveis. Próximos passos incluem criação de Composables, integração com Pinia para gerenciamento de estado, e exploração de async setup e suspense para padrões avançados. Documentação oficial e projetos open-source oferecem recursos valiosos para aprendizado contínuo.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo