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.
MUO VÍDEO DO DIA
ROLE PARA CONTINUAR COM O CONTEÚDO
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 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.
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:
<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 (contar) causará uma atualização na UI do seu aplicativo.
Além disso, você usou o métodos objeto para definir funções JavaScript usadas no componente. Neste exemplo, o snippet define o incremento() método, que incrementa o contar valor da variável por 1.
Ao escrever funções como métodos no Vue 2, você também precisava usar o esse palavra-chave (isto.contar++). O esse palavra-chave permite apontar para variáveis no objeto de dados. Omitindo o esse palavra-chave 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 o referência ou reativo funções para definir dados reativos no Vue 3. O referência função cria uma única referência reativa a um valor, enquanto a reativo A função cria um objeto reativo contendo múltiplas propriedades.
Aqui está um exemplo de como criar dados reativos com o referência função 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 o referência() função no Vue 3, primeiro você precisa importá-la do vue pacote. O referência() função cria referências reativas a variáveis.
O exemplo de bloco de código cria o contar variável com o referência() função e define seu valor inicial como 0. O referência() função retorna um objeto com um valor propriedade. Esse valor propriedade detém o valor real do contar.
O @clique A diretiva é usada para lidar com eventos de clique no Vue.
Você define as funções necessárias em seu componente dentro do configuração de script bloquear. 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 o referência() função anexando um método de valor ao nome da variável. Por exemplo, o bloco de código usa contagem.valor para se referir ao valor do contar variável.
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 o computado opção 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, o contagem dupla propriedade computada depende do contar propriedade de dados. Sempre que o contar alterações de propriedade, o Vue recalcula o contagem dupla propriedade.
No Vue 3, a API Composition introduz uma nova maneira de definir propriedades computadas usando o computado função. 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 o computado função do vue pacote antes de poder usar a função.
Você definiu um contagem dupla ref calculada no bloco de código acima com o computado função. O Vue 3 refere-se às propriedades computadas como referências computadas, destacando sua dependência de variáveis reativas.
O computado A função usa uma função getter como argumento, que calcula o valor derivado com base nos dados reativos. Neste caso, o contagem dupla ref computada 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.