Funções de Composição(Composables)

As funções de composição no Vue.js são uma parte fundamental da Composition API, introduzida no Vue 3. Elas permitem aos desenvolvedores organizar e reutilizar a lógica reativa entre componentes de uma maneira mais flexível e escalável. Vamos explorar como você pode criar e usar funções de composição em seus projetos Vue.js usando TypeScript, especialmente com o uso da sintaxe <script setup> que simplifica a composição.

Introdução às Funções de Composição

Funções de composição são basicamente funções que encapsulam lógica reativa e estado que podem ser reutilizadas em diferentes componentes. Elas são projetadas para trabalhar perfeitamente com a reatividade do Vue, permitindo a você extrair, compartilhar e reutilizar partes reativas do seu componente.

Vantagens das Funções de Composição

1. Reutilização de Código: Facilitam a reutilização de lógica comum entre componentes sem recorrer a mixins ou herança.
2. Organização de Código: Permitem uma separação clara de preocupações dentro de componentes, tornando-os mais fáceis de entender e manter.
3. Testabilidade: Tornam o teste de partes específicas do componente mais direto.

Exemplo Básico de Função de Composição

Vamos criar uma função de composição simples que gerencia um contador. Esta função será definida em um arquivo separado e depois importada em um componente Vue.

Arquivo da Função de Composição (useCounter.ts):

// Importa ref e defineComponent do Vue
import { ref } from "vue";

// Define e exporta a função de composição
export function useCounter() {
  const count = ref(0); // Estado reativo

  // Função para incrementar o contador
  function increment() {
    count.value++;
  }

  // Retorna as variáveis de estado e funções que a composição irá expor
  return { count, increment };
}

Componente Vue (CounterComponent.vue):

<script setup lang="ts">
// Importa a função de composição useCounter
import { useCounter } from "./compositions/useCounter";

// Usa a função de composição para obter estado e métodos
const { count, increment } = useCounter();
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Usando TypeScript com Funções de Composição

Quando você está usando TypeScript, é importante definir claramente os tipos de retornos e parâmetros nas suas funções de composição. Isso melhora a integração com o sistema de tipos do TypeScript e aumenta a segurança do código.

Adicionando Tipagem à Função de Composição:

// useCounter.ts
import { ref } from "vue";

export function useCounter() {
  const count = ref<number>(0); // Especifica que count é um número

  function increment() {
    count.value++;
  }

  return { count, increment };
}

Considerações Finais

As funções de composição são um recurso poderoso do Vue.js que facilita a criação de lógica reativa modular e reutilizável. Com o uso da Composition API e TypeScript, você pode criar aplicações Vue mais organizadas, testáveis e manuteníveis. A utilização da sintaxe <script setup> também simplifica a declaração e uso dessas composições, tornando o código ainda mais limpo e conciso.