Com o anúncio do fim de vida útil do Vue 2 em 31 de dezembro de 2023 pelos seus criadores, os desenvolvedores são fortemente encorajados a migrar para o Vue 3.
Essa transição traz consigo a API Composition, uma funcionalidade que oferece uma maneira mais organizada, declarativa e segura de construir aplicações com o Vue.
O que é a API de Composição?
A API Composition representa uma mudança significativa na forma de escrever componentes Vue, abandonando a estrutura do objeto Options. Este método de desenvolvimento adota uma abordagem mais focada na declaração, permitindo que você se concentre na construção da sua aplicação Vue, enquanto os detalhes de implementação são abstraídos.
Motivação para a API Composition
Os desenvolvedores do Vue perceberam os desafios que surgiam ao construir aplicações web complexas utilizando o objeto Options. Conforme os projetos cresciam, o gerenciamento da lógica dos componentes tornava-se menos escalável e mais difícil de manter, especialmente em ambientes colaborativos.
A abordagem tradicional com o objeto Options muitas vezes levava a componentes com muitas propriedades, dificultando a compreensão e a manutenção do código.
Além disso, a reutilização da lógica em diferentes componentes tornava-se um processo complicado. A lógica dispersa em vários métodos e hooks de ciclo de vida também adicionava complexidade à compreensão do comportamento geral de um componente.
Benefícios da API de Composição
A API Composition oferece diversas vantagens em relação à API Options.
1. Desempenho Otimizado
O Vue 3 apresenta um novo mecanismo de renderização, chamado Sistema de Reatividade Baseado em Proxy. Este sistema proporciona melhor desempenho, reduzindo o consumo de memória e aprimorando a reatividade. O novo sistema de reatividade permite que o Vue 3 gerencie grandes árvores de componentes com maior eficiência.
2. Tamanho do Pacote Reduzido
Devido a uma base de código otimizada e ao suporte para tree-shaking, o Vue 3 possui um tamanho de pacote menor do que o Vue 2. Essa redução no tamanho do pacote resulta em tempos de carregamento mais rápidos e melhor desempenho.
3. Organização de Código Aprimorada
Ao utilizar a API Composition, você pode organizar o código do seu componente em funções menores e reutilizáveis. Isso promove melhor clareza e facilidade de manutenção, especialmente para componentes extensos 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. Suporte Aprimorado para TypeScript
A API Composition oferece um suporte mais abrangente para TypeScript, permitindo uma inferência de tipos mais precisa e uma 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ê compreende a teoria por trás da API Composition, pode começar a utilizá-la na prática. Para entender as vantagens da API Composition, vamos comparar alguns aspectos importantes das duas abordagens.
Dados Reativos no Vue 3
Dados reativos são um conceito fundamental no Vue, que possibilita que mudanças nos dados da sua aplicação acionem atualizações automáticas na interface do usuário.
O Vue 2 baseava seu sistema reativo no método Object.defineProperty e utilizava um objeto de dados contendo todas as propriedades reativas.
Ao definir uma propriedade de dados com a opção `data` em um componente Vue, o Vue envolvia automaticamente cada propriedade do objeto de dados com getters e setters, um recurso do ECMA Script (ES6).
Esses getters e setters monitoravam as dependências entre as propriedades e atualizavam a interface quando você modificava qualquer propriedade.
Segue um exemplo de como criar dados reativos no Vue 2 utilizando o objeto Options:
<template>
<div>
<p>Contador: {{ count }}</p>
<button @click="incrementar">Incrementar</button>
</div>
</template><script>
export default {
data() {
return {
count: 0,
};
},methods: {
incrementar() {
this.count++;
},
},
};
</script>
O trecho de código demonstra como criar variáveis no Vue 2. O Vue automaticamente torna reativas as variáveis definidas no objeto `data`. Alterações em uma propriedade de dados (como `count`) causarão uma atualização na interface do seu aplicativo.
Além disso, você utilizou o objeto `methods` para definir funções JavaScript usadas no componente. Neste exemplo, o código define o método `incrementar()`, que aumenta o valor da variável `count` em 1.
Ao escrever funções como métodos no Vue 2, era necessário usar a palavra-chave `this` (`this.count++`). A palavra-chave `this` permite referenciar variáveis no objeto `data`. Omitir a palavra-chave `this` geraria um erro quando o Vue montasse o componente.
O sistema de reatividade baseado em proxy do Vue 3 utiliza proxies JavaScript para obter reatividade, o que oferece melhorias significativas no desempenho e um melhor gerenciamento de dependências reativas.
Você utiliza as funções `ref` ou `reactive` para definir dados reativos no Vue 3. A função `ref` cria uma única referência reativa para um valor, enquanto a função `reactive` cria um objeto reativo contendo múltiplas propriedades.
Segue um exemplo de como criar dados reativos com a função `ref` no Vue 3:
<script setup>
import { ref } from 'vue';const count = ref(0);
function incrementar() {
count.value++;
}
</script><template>
<div>
<p>Contador: {{ count }}</p>
<button @click="incrementar">Incrementar</button>
</div>
</template>
Para utilizar a função `ref()` no Vue 3, primeiro você precisa importá-la do pacote vue. A função `ref()` cria referências reativas para variáveis.
O trecho de código cria a variável `count` utilizando a função `ref()` e define seu valor inicial como 0. A função `ref()` retorna um objeto com uma propriedade `value`. Esta propriedade `value` contém o valor real do contador.
A diretiva `@click` é utilizada para lidar com eventos de clique no Vue.
Você define as funções necessárias no seu componente dentro do bloco `setup` do script. O Vue 3 substituiu a sintaxe de definição de funções do Vue 2 por funções JavaScript regulares.
Agora você pode acessar as variáveis reativas definidas com a função `ref()` anexando o método `value` ao nome da variável. Por exemplo, o código utiliza `count.value` para se referir ao valor da variável `count`.
A Função Computada no Vue 3
A função `computed` é outra funcionalidade do Vue que permite definir valores derivados com base em dados reativos. Propriedades computadas são atualizadas automaticamente sempre que suas dependências mudam, garantindo que o valor derivado esteja sempre atualizado.
No Vue 2, você definia o comportamento computado utilizando a opção `computed` dentro de um componente. Segue um exemplo:
<template>
<div>
<p>Contador: {{ count }}</p>
<p>Contador Dobrado: {{ doubleCount }}</p>
<button @click="incrementarContador">Incrementar Contador</button>
</div>
</template><script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementarContador() {
this.count++;
}
}
};
</script>
No exemplo acima, a propriedade computada `doubleCount` depende da propriedade de dados `count`. Sempre que a propriedade `count` muda, o Vue recalcula a propriedade `doubleCount`.
No Vue 3, a API Composition introduz uma nova forma de definir propriedades computadas utilizando a função `computed`. Veja como fica:
<script setup>
import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);const incrementarContador = () => {
count.value++;
};
</script><template>
<div>
<p>Contador: {{ count }}</p>
<p>Contador Dobrado: {{ doubleCount }}</p>
<button @click="incrementarContador">Incrementar Contador</button>
</div>
</template>
É necessário importar a função `computed` do pacote vue antes de utilizá-la.
Foi definida uma referência computada `doubleCount` no código acima utilizando a função `computed`. O Vue 3 se refere às propriedades computadas como referências computadas, destacando sua dependência de variáveis reativas.
A função `computed` utiliza uma função getter como argumento, que calcula o valor derivado com base nos dados reativos. Neste caso, a referência computada `doubleCount` retorna a multiplicação da variável reativa `count` por 2.
Note que os trechos de código baseados na API Composition são mais legíveis e concisos do que aqueles escritos com o objeto Options.
Aprenda a Criar Diretivas Personalizadas no Vue
A API Composition do Vue 3 apresenta uma abordagem eficaz e flexível para organizar e reutilizar código em componentes Vue. Com a API Composition, você pode criar aplicações Vue mais modulares e de fácil manutenção.
O Vue também oferece funcionalidades adicionais para maximizar a produtividade durante o desenvolvimento de aplicações web. Você pode aprender a criar diretivas personalizadas para reutilizar certas funções em diferentes partes da sua aplicação Vue.