This content originally appeared on DEV Community and was authored by Stefany Repetcki
🎯 O que são Composables?
Composables são funções criadas para organizar e reutilizar a lógica de forma modular dentro da Composition API. Eles permitem que você extraia a lógica de componentes e compartilhe-a em diferentes partes da aplicação.
🔹 Como criar um Composable?
Um composable é uma função JavaScript que usa recursos da Composition API (como ref, reactive, computed, entre outros).
Exemplo de um composable simples:
// useContador.js
import { ref } from 'vue'
export function useContador() {
const contador = ref(0)
const incrementar = () => {
contador.value++
}
const resetar = () => {
contador.value = 0
}
return {
contador,
incrementar,
resetar
}
}
🔹 Como usar um Composable dentro de um componente?
Após criar o composable, você pode utilizá-lo em qualquer componente da aplicação. Basta importá-lo e chamá-lo dentro do setup() do componente.
Exemplo de componente usando o composable:
<template>
<div>
<p>Contador: {{ contador }}</p>
<button @click="incrementar">Incrementar</button>
<button @click="resetar">Resetar</button>
</div>
</template>
<script>
import { useContador } from './useContador'
export default {
setup() {
const { contador, incrementar, resetar } = useContador()
return { contador, incrementar, resetar }
}
}
</script>
🔹 Por que usar Composables?
- Reusabilidade: Crie uma lógica em um único lugar e use-a em vários componentes.
- Legibilidade: Mantenha os componentes mais limpos e organizados.
- Manutenção: Facilite a manutenção e refatoração do código.
- Testabilidade: Teste composables de forma isolada.
🔹 Exemplo Avançado: Composables com watch e computed
Você pode utilizar hooks como watch e computed dentro dos composables para criar comportamentos mais complexos.
Exemplo com watch e computed:
// useDados.js
import { ref, computed, watch } from 'vue'
export function useDados() {
const nome = ref('')
const idade = ref(0)
// Computed para calcular a idade em 10 anos
const idadeFutura = computed(() => idade.value + 10)
// Watch para monitorar mudanças no nome
watch(nome, (novoNome, nomeAntigo) => {
console.log(`Nome mudou de ${nomeAntigo} para ${novoNome}`)
})
return {
nome,
idade,
idadeFutura
}
}
Como usar esse composable dentro de um componente?
<template>
<div>
<p>Nome: <input v-model="nome" /></p>
<p>Idade: <input v-model="idade" type="number" /></p>
<p>Idade em 10 anos: {{ idadeFutura }}</p>
</div>
</template>
<script>
import { useDados } from './useDados'
export default {
setup() {
const { nome, idade, idadeFutura } = useDados()
return { nome, idade, idadeFutura }
}
}
</script>
⚡ Composables e a Reatividade
Os composables podem ser usados para encapsular a lógica reativa. Você pode usar ref, reactive, computed, e watch para gerenciar dados dinâmicos e reativos dentro de funções reutilizáveis.
📝 Resumo Rápido
| Característica | Descrição |
|---|---|
| O que são Composables | Funções reutilizáveis que encapsulam lógica reativa e comportamentos dinâmicos. |
| Vantagens | Reusabilidade, manutenção facilitada, legibilidade e testabilidade. |
| Como Usar | Crie funções utilizando hooks como ref, computed, e watch, e utilize-as em qualquer componente. |
🚀 Dica Final
Composables são poderosos porque permitem abstrair lógica e compartilhá-la em toda a sua aplicação, sem necessidade de duplicar código ou depender de mixins, como acontecia nas versões anteriores do Vue.
Se quiser criar uma aplicação mais escalável e modular, sempre que tiver alguma lógica complexa ou que se repete em múltiplos componentes, pense em criar um composable para ela.
This content originally appeared on DEV Community and was authored by Stefany Repetcki
Stefany Repetcki | Sciencx (2025-04-22T23:41:41+00:00) Composables – Funções Reutilizáveis na Composition API. Retrieved from https://www.scien.cx/2025/04/22/composables-funcoes-reutilizaveis-na-composition-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.