Deixar de utilizar a API de opções no Vue

Vue 3 introduziu uma nova abordagem para a criação de componentes denominada Composição API. É uma alternativa ao Opções API. A API de composição é totalmente opcional e não precisa de a utilizar se quiser usar Vue 3. No entanto, introduz algumas melhorias importantes que facilitam o seu trabalho e melhoram a legibilidade do código.

Vantagens da API de composição em relação à API de opções

1. Melhor organização e legibilidade do código.

A API de composição introduz um novo método chamado configuração. No seu interior, pode criar todos os elementos necessários do componente, tais como: dados, métodos, propriedades calculadas, observadores. Graças a isto, é possível manter o código limpo, colocando a lógica responsável por uma determinada funcionalidade num único local. Em contrapartida, a API Options forçava a dispersão da lógica por todo o ficheiro. Como resultado, o código não era legível e exigia deslocação. Na API Composition, os métodos, os observadores, etc., já não precisam de ser agrupados por tipo, podendo ser colocados como entender.

2. Extrair e reutilizar a lógica.

A API de composição permite-lhe escrever código reativo em qualquer lugar. Pode puxar alguma lógica reactiva para fora do componente. Esse tipo de código é chamado de Compostos. Os compostáveis podem ser importados para muitos componentes e permitem-lhe encapsular alguma lógica e expor os elementos reactivos necessários.

// shopping-list.js
import ( computed ) from "vue";

export function useShoppingList(listId) (
  const products = shoppingList.getAllProducts(listId);
  const productsCount = computed(() => products.value.length);
  const deleteProduct = (productId) => shoppingList.deleteProduct(productId);

  return (
    produtos,
    productsCount,
    deleteProduct,
  );
)

// Componente
importar useSpoppingList de "@/composables/shopping-list.js";
export default (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    return ( products, productsCount, deleteProduct );
  ),
);

3. Utilizar facilmente constantes e recursos externos no componente.

Na API de opções, para adicionar, por exemplo, uma lista estática de itens importados de outro ficheiro, é necessário adicioná-la a data() (o que tem um impacto negativo no desempenho) ou adicioná-la a este em criado(). Ambas as formas não são muito elegantes. A API de composição e a nova configuração vem em seu socorro, a partir do qual pode exportar não só coisas reactivas, mas também constantes e dependências externas.

importar lista de "./list.json";
exportar predefinição (
  setup() (
    return ( list );
  ),
);

4. Pode mesmo utilizar a API Composition no Vue 2.

Graças ao sítio oficial @vue/composition-api pode utilizar a API de composição em Vue 2 também.

Como utilizar a nova API de composição?

<h3>Método de configuração</h3>

setup() é um novo método adicionado em Vue 3 onde pode colocar todos os elementos necessários, tais como objectos de dados, métodos, etc. A partir daí, pode devolver os elementos que pretende incluir no modelo.

<template>
  <div>(( contagem ))</div>
</template>

import ( ref ) from "vue";
exportar por defeito (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

reativo()

Para criar um objeto reativo ou uma matriz, é necessário criá-lo com a função reativo(defaultValue) método. É possível passar o valor inicial deste objeto através de um argumento do método. O método devolve um procurador para este objeto, por isso, quando fizer alterações ao mesmo, Vue conhece-os e pode atualizar corretamente a vista.

Composição API

import ( reactive ) from "vue";
exportar por defeito (
  setup() (
    const user = reactive((
      nome: "João",
      role: "ADMIN",
    ));
    return ( utilizador );
  ),
);

Opções API

exportar por defeito (
  dados() (
    return (
      utilizador: (
        nome: "João",
        função: "ADMIN",
      ),
    );
  ),
);

Reactive apenas funciona para tipos de objectos (objectos, matrizes e tipos de colecções como Mapa e Conjunto). Não pode conter tipos primitivos como corda, número ou booleano. Assim, o Vue também introduz ref().

ref()

Para adicionar reatividade a elementos primitivos, é necessário envolvê-los com ref().

Composição API

import ( ref ) from "vue";
exportar por defeito (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

Opções API

exportar por defeito (
  dados() (
    return (
      count: 10,
    );
  ),
);

Modificação de objectos reactivos

É possível alterar valores em objectos diretamente a partir do método reativo, mas para alterar valores primitivos é necessário utilizar o método .valor domínio.

import ( ref, reactive ) from "vue";
exportar por defeito (
  setup() (
    const user = reactive((
      nome: "João",
    ));
    user.name = "John Doe"; // Alteração do valor

    const count = ref(10);
    count.value = 20; // Alteração de valor

    return (
      utilizador,
      count,
    );
  ),
);

Você não precisa de utilizar o .valor no modelo.

<div>(( contagem ))</div>

Propriedades calculadas

As propriedades computadas podem ser facilmente criadas passando um método como parâmetro para o método importado computado() método.

import ( reactive, computed ) from "vue";
exportar por defeito (
  setup() (
    const list = reactive([
      "Item 1",
      "Item 2",
    ]);

    // Computado
    const isEmpty = computed(() => list.length === 0);

    return (
      list,
      isEmpty,
    );
  ),
);

Métodos

Também é possível aninhar métodos no configuração método.

Composição API

import ( ref ) from "vue";
exportar por defeito (
  setup() (
    const count = ref(10);

        // Método
    const increment = () => (
      count.value++;
    );

    return (
      count,
      incremento,
    );
  ),
);

Vigilantes

Os vigilantes são criados de forma semelhante aos calculado. No entanto, lembre-se de passar o procurador objeto, ou seja nome, como no exemplo abaixo, e não o nome.valor valor em si.

import ( watch, ref ) from "vue";
exportar por defeito (
  setup() (
    const name = ref("John");
        // Observador
    watch(name, (currentValue, oldValue) => (
      console.log(`Valor alterado de $(oldValue)para $(currentValue)`);
    ));
    return ( nome );
  ),
);

Resumo

Neste artigo, apenas apresentei as noções básicas da API de composição para que tenha uma noção geral das suas diferenças e vantagens em relação à API de opções. A API de composição também fornece alternativas para o resto dos elementos do componente, tais como ganchose introduz novos métodos, tais como watchEffect. É uma boa ideia lê-lo na versão oficial Vue 3 documentação.