Interruzione dell'uso dell'API delle opzioni nell'Vue

Vue 3 ha introdotto un nuovo approccio alla creazione di componenti chiamato Composizione API. Si tratta di un'alternativa al Opzioni API. L'API di composizione è del tutto opzionale e non è necessario utilizzarla se si vuole utilizzare Vue 3. Tuttavia, introduce alcuni importanti miglioramenti che facilitano il lavoro dell'utente e migliorano la leggibilità del file. codice.

Vantaggi di Composition API rispetto a Options API

1. Migliore organizzazione e leggibilità del codice.

L'API di composizione introduce un nuovo metodo chiamato impostazione. Al suo interno è possibile creare tutti gli elementi necessari del componente, come ad esempio: dati, metodi, proprietà calcolate, osservatori. Grazie a ciò, è possibile mantenere il codice pulito, collocando la logica responsabile di una determinata funzione in un unico punto. Al contrario, l'API delle opzioni costringeva a disperdere la logica in tutto il file. Di conseguenza, il codice non era leggibile e richiedeva lo scorrimento. In Composition API i metodi, gli osservatori e così via non devono più essere raggruppati per tipo, ma possono essere collocati come meglio si crede.

2. Estrazione e riutilizzo della logica.

L'API Composition consente di scrivere codice reattivo ovunque. È possibile estrarre la logica reattiva al di fuori del componente. Questo tipo di codice è chiamato Composizioni. I componibili possono essere importati in molti componenti e consentono di incapsulare una certa logica e di esporre gli elementi reattivi necessari.

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

esportare la funzione useShoppingList(listId) (
  const products = shoppingList.getAllProducts(listId);
  const productsCount = computed(() => products.value.length);
  const deleteProduct = (productId) => shoppingList.deleteProduct(productId);

  restituire (
    prodotti,
    productsCount,
    deleteProduct,
  );
)

// Componente
importare useSpoppingList da "@/composables/shopping-list.js";
Esportazione predefinita (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    return ( products, productsCount, deleteProduct );
  ),
);

3. Utilizzare facilmente costanti e risorse esterne nel componente.

Nell'API Opzioni, per aggiungere, ad esempio, un elenco statico di elementi importati da un altro file, è necessario aggiungerlo a data() (con un impatto negativo sulle prestazioni) o aggiungerlo a questo in creato(). Entrambi i modi non sono molto eleganti. L'API di composizione e il nuovo impostazione da cui si possono esportare non solo le cose reattive, ma anche le costanti e le dipendenze esterne.

importare lista da "./list.json";
Esportazione di default (
  setup() (
    return ( list );
  ),
);

4. È anche possibile utilizzare l'API di composizione in Vue 2.

Grazie al sito ufficiale @vue/composition-api è possibile utilizzare l'API Composition in Vue 2 anche.

Come utilizzare la nuova API di composizione?

<h3>Metodo di impostazione</h3>

setup() è un nuovo metodo aggiunto in Vue 3 dove si possono inserire tutti gli elementi necessari, come oggetti di dati, metodi, ecc. Da qui si possono restituire gli elementi che si desidera includere nel modello.

<template>
  <div>(( conteggio ))</div>
</template>

importare ( ref ) da "vue";
esportare l'impostazione predefinita (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

reattivo()

Per creare un oggetto o un array reattivo, occorre crearlo con il metodo reattivo(defaultValue) metodo. È possibile passare il valore iniziale di questo oggetto tramite un argomento del metodo. Il metodo restituisce un oggetto delega per questo oggetto, in modo che quando si apportano modifiche ad esso, Vue ne è a conoscenza e può aggiornare correttamente la vista.

Composizione API

importare ( reactive ) da "vue";
esportare l'impostazione predefinita (
  setup() (
    const user = reactive((
      nome: "John",
      ruolo: "ADMIN",
    ));
    return ( user );
  ),
);

Opzioni API

esportare i valori predefiniti (
  dati() (
    ritorno (
      utente: (
        nome: "John",
        ruolo: "ADMIN",
      ),
    );
  ),
);

Reactive solo funziona per i tipi di oggetti (oggetti, array e tipi di collezioni come Mappa e Set). Non può contenere tipi primitivi come stringa, numero o booleano. Quindi l'Vue introduce anche ref().

ref()

Per aggiungere reattività agli elementi primitivi è necessario avvolgerli con ref().

Composizione API

importare ( ref ) da "vue";
esportare l'impostazione predefinita (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

Opzioni API

esportare i valori predefiniti (
  dati() (
    restituire (
      conteggio: 10,
    );
  ),
);

Modifica degli oggetti reattivi

È possibile modificare i valori degli oggetti direttamente dal metodo reattivo, ma per modificare i valori primitivi è necessario utilizzare il metodo .valore campo.

importare ( ref, reactive ) da "vue";
esportare l'impostazione predefinita (
  setup() (
    const user = reactive((
      nome: "Giovanni",
    ));
    user.name = "John Doe"; // Modifica del valore

    const count = ref(10);
    count.value = 20; // Modifica del valore

    restituire (
      utente,
      count,
    );
  ),
);

Tu non utilizzare l'opzione .valore nel modello.

<div>(( conteggio ))</div>

Proprietà calcolate

Le proprietà calcolate possono essere facilmente create passando un metodo come parametro al metodo importato calcolato() metodo.

importare ( reactive, computed ) da "vue";
esportare l'impostazione predefinita (
  setup() (
    const list = reactive([
      "Elemento 1",
      "Elemento 2",
    ]);

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

    restituire (
      lista,
      isEmpty,
    );
  ),
);

Metodi

Si possono anche annidare metodi nella classe impostazione metodo.

Composizione API

importare ( ref ) da "vue";
esportare l'impostazione predefinita (
  setup() (
    const count = ref(10);

        // Metodo
    const incremento = () => (
      count.value++;
    );

    restituire (
      conteggio,
      incremento,
    );
  ),
);

Osservatori

Gli osservatori vengono creati in modo simile a calcolato. Tuttavia, ricordate di passare il delega oggetto, cioè nomecome nell'esempio che segue, non l'opzione nome.valore valore stesso.

importare ( watch, ref ) da "vue";
esportare l'impostazione predefinita (
  setup() (
    const name = ref("John");
        // Osservatore
    watch(name, (currentValue, oldValue) => (
      console.log(`Valore cambiato da $(oldValue)a $(currentValue)`);
    ));
    return ( nome );
  ),
);

Sintesi

In questo articolo ho fornito solo le basi dell'API Composition, in modo che si abbia una comprensione generale delle sue differenze e dei vantaggi che offre rispetto all'API Options. L'API Composition fornisce anche alternative al resto degli elementi del componente, come ad esempio gancie introduce nuovi metodi, come guardareEffetto. È buona norma leggerlo nella versione ufficiale. Vue 3 documentazione.