Composables - Funções Reutilizáveis na Composition API

🎯 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

🚀 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.