Migrando para a API de composição do Vue 3 para um melhor desenvolvimento de componentes

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

A introdução desta evolução traz a Composite Application Platform Interface, que apresenta um método mais simplificado, explícito e seguro para a construção de projectos Vue através dos seus princípios de design modular e declarativo.

O que é a API de composição?

O surgimento da API de composição significa um afastamento significativo da metodologia convencional empregada na criação de componentes Vue usando o objeto Options. A adoção desta técnica progressiva alinha-se com uma mentalidade cada vez mais assertiva e declarativa que enfatiza a concentração na construção de uma aplicação Vue sem ser sobrecarregada por particularidades de implementação intrincadas.

Motivação para a API de Composição

Os desenvolvedores do Vue identificaram as dificuldades associadas com a utilização do objeto Options na construção de aplicações web complexas à medida que o tamanho dos projetos aumentava. Especificamente, a gestão da lógica de um componente tornou-se menos viável em grande escala e mais difícil de manter em ambientes colaborativos.

A implementação convencional do objeto Options conduzia frequentemente a uma abundância de atributos de componentes, tornando o código difícil de compreender e gerir devido à sua complexidade.

Além disso, a utilização de lógica partilhada entre componentes díspares revelou-se difícil de gerir. Além disso, a lógica disseminada e dispersa por vários ganchos e métodos do ciclo de vida dificultava ainda mais a compreensão da conduta global de um componente individual.

Benefícios da API de composição

A utilização da API de composição apresenta uma multiplicidade de benefícios em comparação com a API de opções, melhorando a funcionalidade geral e a experiência do utilizador.

Desempenho melhorado

O Vue 3 introduziu uma abordagem de renderização inovadora conhecida como o Sistema de Reatividade baseado em Proxy, que foi concebido para melhorar o desempenho e as capacidades reactivas. Ao minimizar a utilização de memória e otimizar a reatividade, este novo sistema permite um melhor manuseamento de extensas hierarquias de componentes com maior eficiência.

Menor tamanho do pacote

Devido à arquitetura simplificada e à alocação eficiente de recursos proporcionada pela base de código optimizada e pelas capacidades de tree-shaking do Vue 3, este possui um pacote mais compacto em comparação com o seu antecessor, resultando em tempos de carregamento mais rápidos e melhor desempenho geral.

Organização de código melhorada

Ao utilizar as capacidades da API de composição, é possível dividir o código-fonte de um componente em unidades modulares mais fáceis de gerir através da implementação de funções mais pequenas e reutilizáveis. Esta abordagem não só melhora a compreensão e facilita a manutenção contínua, mas também serve como uma estratégia valiosa para enfrentar os desafios colocados por componentes intrincados e extensos.

Reutilização de componentes e funções

A utilização de funções de composição permite a integração e reutilização de código em vários componentes, resultando numa biblioteca eficiente de funcionalidades partilhadas.

Melhor suporte a TypeScript

A introdução da API de composição melhorou significativamente o nível de suporte a TypeScript no Visual Studio Code, resultando num maior grau de precisão no que diz respeito à inferência de tipos, bem como numa maior capacidade de detetar e resolver discrepâncias tipográficas durante o processo de desenvolvimento.

Comparação entre o objeto Options e a API de composição

Conhecendo os fundamentos teóricos da API de composição do React, você está preparado para aplicar esse conhecimento em contextos práticos. Uma comparação entre os benefícios oferecidos pela API de composição e aqueles fornecidos pelos componentes de classe ajudará a esclarecer sua proposta de valor.

Dados reactivos em Vue 3

Os dados reactivos referem-se a um princípio-chave do Vue, que permite interacções perfeitas entre modificações de dados e actualizações correspondentes na interface do utilizador, sem necessidade de acções explícitas ou de recarregar páginas. Esta sincronização automática garante uma experiência eficiente e reactiva para os utilizadores.

O Vue 2 utilizou o método Object.defineProperty como base para o seu sistema reativo, com o referido sistema a ser construído sobre um objeto de dados que englobava todas as propriedades reactivas dentro de uma aplicação.

A utilização da opção data num componente Vue permite a implementação automática de métodos getter e setter compatíveis com ES6 em torno de cada propriedade contida no objeto data .

Os getters e setters acima mencionados monitorizaram as interdependências entre atributos e ajustaram dinamicamente a interface do utilizador em resposta a modificações feitas em qualquer um destes atributos.

De uma forma mais refinada, eis uma ilustração que demonstra a geração de dados reactivos no Vue 2 utilizando 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>

Neste exemplo, ilustramos o processo de criação de variáveis mutáveis no contexto do Vue.js. Assim que uma variável é definida dentro do objeto data , torna-se inerentemente recetiva a alterações e actualizações, resultando consequentemente em modificações na interface de utilizador da aplicação associada.

Além disso, utilizou o objeto methods para implementar funções JavaScript que são utilizadas no componente. Neste caso, o bloco de código delineia a função increment() , que aumenta o valor da variável count em um.

Para utilizar funções como métodos numa aplicação Vue 2, é essencial empregar a palavra-chave “this” juntamente com a chamada da função e a(s) sua(s) variável(eis) associada(s). Isto acontece porque a palavra-chave “this” serve para referenciar as variáveis do objeto de dados pertinente. A não inclusão da palavra-chave “this” no momento da renderização do componente resultará na geração de um erro pelo Vue durante o processo de montagem.

O Vue 3 implementou um sistema de reatividade baseado em proxy que aproveita o poder dos proxies JavaScript para melhorar a sua funcionalidade. Esta nova abordagem proporciona benefícios de desempenho notáveis, bem como uma melhor gestão das dependências reactivas, resultando numa experiência de desenvolvimento globalmente mais eficiente.

O Vue fornece dois tipos de funções para definir dados reactivos - a função ref e a função reactive . A primeira estabelece uma referência reactiva solitária a um valor específico, enquanto a segunda constrói uma estrutura reactiva completa que inclui várias propriedades.

Neste exemplo, vamos ilustrar o processo de geração de dados reactivos utilizando a função ref no contexto do 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 utilizar a função ref() no contexto do Vue 3, é necessário primeiro importá-la do pacote Vue. Esta função serve como um meio de criar referências reactivas a várias variáveis.

O código JavaScript fornecido utiliza a função ref() para criar uma referência à variável count , definindo seu valor inicial como “0”. Posteriormente, atribui o objeto devolvido da função ref() à variável count .O referido objeto contém uma única propriedade denominada value , que serve de armazenamento mutável para o estado atual da variável count .

A diretiva @click é utilizada na estrutura Vue para gerir e responder a eventos de clique que ocorrem na interface renderizada de um componente. Este mecanismo de ligação de eventos permite um tratamento personalizado das interacções do utilizador, permitindo aos programadores incorporar funcionalidades dinâmicas ou desencadear acções específicas ao detetar um evento de clique.

No Vue 3, a sintaxe do método para definir funções em componentes foi substituída pela utilização de funções JavaScript padrão. Estas funções são definidas no bloco de configuração do script do componente.

É agora possível utilizar as propriedades reactivas estabelecidas através da aplicação da função ref(), associando um método de retorno de valor ao identificador designado. Como ilustração, o exemplo de código fornecido utiliza a sintaxe “count.value” para aludir ao estado atual da propriedade reactiva “count”.

A função Computed no Vue 3

A função Computed é uma ferramenta valiosa no arsenal do Vue, permitindo a criação de valores computados que derivam de dados reactivos. Este processo de atualização automática ocorre sempre que qualquer dependência é alterada, garantindo assim que o cálculo resultante permanece sempre atual e preciso.

No Vue 2, define-se o comportamento computado de um componente utilizando a opção “computed” situada dentro desse componente. Uma ilustração de exemplo é fornecida abaixo:

 <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>

Na ilustração acima mencionada, a propriedade computada doubleCount depende da propriedade de dados count . Se a propriedade count sofrer quaisquer alterações, o Vue reavaliará a propriedade doubleCount em conformidade.

No Vue 3, a introdução da API Composition apresenta uma nova abordagem para definir propriedades computadas através da utilização da função computed . A sintaxe para esta implementação é a seguinte:

 <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>

Para utilizar a função computada derivada do pacote Vue, é imperativo que se importe primeiro essa função para a sua base de código.

No trecho de código fornecido, estabelecemos uma propriedade computada chamada “doubleCount” utilizando uma função computável. Esta nomenclatura enfatiza a dependência das propriedades computadas em fontes de dados reactivas, o que é uma caraterística importante da estrutura do Vue 3.

A implementação fornecida define uma função de cálculo que aceita uma função getter como entrada, em que esta última é responsável por derivar um valor dos dados reactivos. Especificamente, neste caso, a reflexão computada doubleCount devolve o produto da variável reactiva count multiplicado por dois.

É importante notar que os blocos de código criados com a API Composition tendem a ser mais legíveis e sucintos do que os blocos construídos com o objeto Options.

Aprenda a criar directivas personalizadas no Vue

A API de composição do Vue 3 oferece um método robusto e versátil para estruturar e reutilizar código em modelos de componentes, permitindo que os programadores criem aplicações Vue mais simplificadas e geríveis através de uma maior modularidade e facilidade de manutenção.

O Vue fornece funcionalidades adicionais que aumentam a eficiência na criação de aplicações Web. É possível adquirir conhecimentos sobre como desenvolver directivas personalizadas, o que permite a utilização de funcionalidades específicas em várias secções de um projeto Vue.