Composição API

A Composição API, introduzida no Vue 3, é uma poderosa adição que permite uma melhor organização do código e reutilização de lógica entre componentes. Comparada à Options API, a Composição API oferece mais flexibilidade e claridade, especialmente em componentes complexos ou quando a lógica precisa ser compartilhada entre vários componentes. Vamos explorar os principais aspectos da Composição API: refs, reactive, computed properties, e lifecycle hooks.

Refs

Refs são usadas para manter um estado reativo. Ao contrário das propriedades reativas tradicionais criadas com reactive, uma ref é um objeto que encapsula um valor reativo. Quando você precisa manter um valor primitivo (como string, número, booleano) em um estado reativo, ref é geralmente a opção mais prática.

import { ref } from "vue";

export default {
  setup() {
    const count = ref(0);

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

    return { count, increment };
  },
};

No exemplo acima, count é uma ref que inicializa com 0. Para acessar ou modificar o valor de count, você deve usar count.value.

Reactive

Enquanto ref é usado para valores primitivos, reactive é usado para tornar objetos ou arrays reativos. reactive fornece uma maneira de trabalhar com uma resposta reativa profunda.

import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
      user: {
        name: "Alice",
      },
    });

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

    return { state, increment };
  },
};

O objeto state é totalmente reativo, incluindo suas propriedades aninhadas.

Computed Properties

Propriedades computadas no contexto da Composição API são criadas usando a função computed. Elas são especialmente úteis quando você precisa derivar valores com base no estado reativo, e esses valores precisam ser recalculados apenas quando as dependências mudam.

import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return { count, doubleCount };
  },
};

Aqui, doubleCount é uma propriedade computada que automaticamente se atualiza quando count muda.

Lifecycle Hooks

Os hooks de ciclo de vida na Composição API são semelhantes aos da Options API, mas são utilizados diretamente na função setup. Isso permite um controle mais granular sobre quando diferentes partes da lógica do componente devem ser executadas.

import { onMounted, onBeforeUnmount } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("Component is mounted!");
    });

    onBeforeUnmount(() => {
      console.log("Component is about to be unmounted!");
    });
  },
};

Neste exemplo, onMounted e onBeforeUnmount são usados para executar código em pontos específicos no ciclo de vida do componente.

Conclusão

A Composição API abre portas para uma nova maneira de construir e organizar componentes Vue. Com sua abordagem baseada em função, ela traz clareza e reusabilidade para a lógica de componentes, facilitando a manutenção e o teste de aplicações Vue complexas. Se você está construindo componentes grandes ou trabalhando em uma equipe grande onde a consistência e a modularidade são essenciais, a Composição API é uma ferramenta valiosa que deve ser considerada.