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.
últimas postagens
O que é a API de composição?
A API Composition representa uma mudança de paradigma na escrita de componentes Vue a partir do objeto Options. 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. Melhor desempenho
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.
O Vue 2 baseou seu sistema reativo no método Object.defineProperty 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:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template><script>
export default {
data() {
return {
count: 0,
};
},methods: {
increment() {
this.count++;
},
},
};
</script>
O bloco de código demonstra como criar variáveis no Vue 2. O Vue torna as variáveis definidas no objeto de dados reativas automaticamente. As alterações feitas em uma propriedade de dados (contagem) causarão uma atualização na interface do usuário do seu aplicativo.
Além disso, você usou o objeto de métodos para definir funções JavaScript usadas no componente. Neste exemplo, o snippet define o método increment(), que incrementa o valor da variável de contagem em 1.
Ao escrever funções como métodos no Vue 2, você também precisava usar a palavra-chave this (this.count++). A palavra-chave this permite apontar para variáveis no objeto de dados. Omitir a palavra-chave this gerará um erro quando o Vue montar o componente.
O sistema de reatividade baseado em proxy do Vue 3 usa proxies JavaScript para obter reatividade, o que oferece melhorias significativas de desempenho e melhor tratamento de dependências reativas.
Você usa as funções ref ou reativas para definir dados reativos no Vue 3. A função ref cria uma única referência reativa para um valor, enquanto a função reativa cria um objeto reativo contendo múltiplas propriedades.
Aqui está 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 increment() {
count.value++;
}
</script><template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
Para usar 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 exemplo de bloco de código cria a variável count com 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 da contagem.
A diretiva @click é usada para lidar com eventos de clique no Vue.
Você define as funções necessárias em seu componente no bloco de configuração do script. O Vue 3 substituiu a sintaxe dos métodos de definição de funções no Vue 2 por funções JavaScript regulares.
Agora você pode acessar as variáveis reativas definidas com a função ref() anexando um método de valor ao nome da variável. Por exemplo, o bloco de código usa count.value para se referir ao valor da variável count.
A função computada no Vue 3
A função Computed é outro recurso do Vue que permite definir valores derivados com base em dados reativos. As propriedades computadas são atualizadas automaticamente sempre que suas dependências mudam, garantindo que o valor derivado esteja sempre atualizado.
No Vue 2, você define o comportamento computado com a opção computada dentro de um componente. Aqui está um exemplo:
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template><script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementCount() {
this.count++;
}
}
};
</script>
No exemplo acima, a propriedade computada doubleCount depende da propriedade de dados de contagem. Sempre que a propriedade count muda, o Vue recalcula a propriedade doubleCount.
No Vue 3, a API Composition introduz uma nova maneira de definir propriedades computadas usando a função computada. Veja como parece:
<script setup>
import { ref, computed } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);const incrementCount = () => {
count.value++;
};
</script><template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
Você deve importar a função computada do pacote vue antes de poder usar a função.
Você definiu uma referência computada doubleCount no bloco de código acima com a função computada. O Vue 3 refere-se às propriedades computadas como referências computadas, destacando sua dependência de variáveis reativas.
A função computada usa uma função getter como argumento, que calcula o valor derivado com base nos dados reativos. Nesse caso, a referência calculada doubleCount retorna a multiplicação da variável reativa de contagem por 2.
Observe que os blocos 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 em Vue
A API de composição Vue 3 apresenta uma abordagem poderosa e flexível para organizar e reutilizar código em componentes Vue. Você pode construir aplicativos Vue mais modulares e de fácil manutenção com a API Composition.
Vue também oferece recursos extras para maximizar a produtividade durante o desenvolvimento de aplicativos web. Você pode aprender a criar diretivas personalizadas para reutilizar certas funções em diferentes partes do seu aplicativo Vue.