Aprenda como migrar da API Options para a API Composition no Vue 3.

Como os criadores do Vue anunciaram que o Vue 2 chegará ao fim de sua vida útil em 31 de dezembro de 2023, os desenvolvedores são incentivados a mudar para o Vue 3.

Com essa transição vem a API Composition, um recurso que oferece uma abordagem mais modular, declarativa e segura para a construção de aplicações Vue.

O que é a API de composição?

A API Composition representa uma mudança de paradigma na escrita de componentes Vue a partir de o objeto Opções. Este estilo de desenvolvimento adota uma abordagem mais declarativa, permitindo que você se concentre na construção de seu aplicativo Vue enquanto abstrai os detalhes de implementação.

Motivação para a API Composition

Os criadores do Vue reconheceram os desafios ao construir aplicações web complexas com o objeto Options. À medida que os projetos cresceram, o gerenciamento da lógica do componente tornou-se menos escalável e mais difícil de manter, especialmente em ambientes colaborativos.

A abordagem tradicional do objeto Options geralmente resultava em muitas propriedades de componentes, tornando o código difícil de compreender e manter.

Além disso, a reutilização da lógica dos componentes em diferentes componentes tornou-se complicada. A lógica dispersa dentro de vários métodos e ganchos de ciclo de vida também adicionou complexidade à compreensão do comportamento geral de um componente.

Benefícios da API de composição

A API Composition traz diversas vantagens sobre a API Options.

1. Performance melhorada

O Vue 3 introduz um novo mecanismo de renderização chamado Sistema de Reatividade Baseado em Proxy. Este sistema oferece melhor desempenho, reduzindo o consumo de memória e melhorando a reatividade. O novo sistema de reatividade permite que o Vue 3 lide com árvores de componentes gigantes com mais eficiência.

2. Tamanho de pacote menor

Graças à base de código otimizada e ao suporte para trepidação de árvore, o Vue 3 tem um tamanho de pacote menor que o Vue 2. Essa redução no tamanho do pacote leva a tempos de carregamento mais rápidos e melhor desempenho.

3. Organização de código aprimorada

Ao aproveitar a API Composition, você pode organizar o código do seu componente em funções menores e reutilizáveis. Isto promove melhor compreensão e manutenção, especialmente para componentes grandes e complexos.

4. Reutilização de componentes e funções

As funções de composição podem ser facilmente reutilizadas em diferentes componentes, facilitando o compartilhamento de código e a criação de uma biblioteca de funções reutilizáveis.

5. Melhor suporte a TypeScript

A API Composition fornece suporte TypeScript mais abrangente, permitindo inferência de tipos mais precisa e identificação mais fácil de erros relacionados a tipos durante o desenvolvimento.

Comparação entre o objeto Options e a API Composition

Agora que você entende a teoria por trás da API Composition, pode começar a usá-la na prática. Para entender as vantagens da API Composition, vamos comparar alguns aspectos importantes de ambas as abordagens.

Dados reativos no Vue 3

Dados reativos são um conceito fundamental no Vue que permite que alterações de dados em seu aplicativo acionem atualizações na interface do usuário automaticamente.

Vue 2 baseou seu sistema reativo no Object.defineProperty método e contou com um objeto de dados contendo todas as propriedades reativas.

Quando você definiu uma propriedade de dados com a opção data em um componente Vue, o Vue envolveu automaticamente cada propriedade no objeto de dados com getters e setters, um novo recurso ECMA Script (ES6).

Esses getters e setters rastreavam dependências entre propriedades e atualizavam a UI quando você modificava qualquer propriedade.

Aqui está um exemplo de como você cria dados reativos no Vue 2 com o objeto Options: