Stop het gebruik van Options API in Vue

Vue 3 introduceerde een nieuwe benadering voor het maken van componenten genaamd Samenstelling API. Het is een alternatief voor de Opties API. De Composition API is volledig optioneel en je hoeft hem niet te gebruiken als je Vue 3. Het introduceert echter enkele belangrijke verbeteringen die uw werk eenvoudiger maken en de leesbaarheid van de code.

Voordelen van Compositie API ten opzichte van Opties API

1. Betere organisatie en leesbaarheid van de code.

De Composition API introduceert een nieuwe methode genaamd setup. Hierin kun je alle noodzakelijke elementen van het component maken, zoals: gegevens, methoden, berekende eigenschappen, watchers. Hierdoor kun je de code schoon houden door de logica die verantwoordelijk is voor een bepaalde functie op één plek te plaatsen. Daarentegen dwong de Options API de verspreiding van de logica door het hele bestand af. Hierdoor was de code niet leesbaar en moest je scrollen. Hierdoor was de code niet leesbaar en moest je scrollen. In Composition API hoeven methodes, watchers enz. niet langer per type gegroepeerd te worden, je kunt ze plaatsen zoals je wilt.

2. Logica eruit halen en hergebruiken.

Met de Composition API kun je overal reactieve code schrijven. Je kunt wat reactieve logica buiten het component halen. Dit type code wordt Composables. Composables kunnen in veel componenten worden geïmporteerd en stellen je in staat om bepaalde logica in te kapselen en de benodigde reactieve elementen bloot te leggen.

// boodschappenlijst.js
importeer ( berekend ) van "vue";

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

  terugkeren (
    producten,
    productsCount,
    verwijderProduct,
  );
)

// Component
importeer useSpoppingList uit "@/composables/shopping-list.js";
export standaard (
  setup() (
    const ( producten, productsCount, deleteProduct ) = useSpoppingList();
    return ( producten, productenCount, verwijderProduct );
  ),
);

3. Gemakkelijk constanten en externe bronnen gebruiken in component.

In de Opties-API moet je, om bijvoorbeeld een statische lijst met geïmporteerde items uit een ander bestand toe te voegen, deze toevoegen aan data() (wat een negatief effect heeft op de prestaties) of toevoegen aan deze in aangemaakt(). Beide manieren zijn niet erg elegant. De Composition API en de nieuwe setup methode te hulp schieten, van waaruit je niet alleen reactieve dingen kunt exporteren, maar ook constanten en externe afhankelijkheden.

importeer lijst uit "./list.json";
export standaard (
  setup() (
    return ( lijst );
  ),
);

4. Je kunt zelfs de Composition API gebruiken in Vue 2.

Dankzij de officiële @vue/compositie-api plugin, kunt u Composition API gebruiken in Vue 2 ook.

Hoe gebruik je de nieuwe Compositie-API?

<h3>Setup-methode</h3>

setup() is een nieuwe methode die is toegevoegd in Vue 3 waar u alle benodigde elementen kunt plaatsen, zoals gegevensobjecten, methoden enz. Van daaruit kunt u de elementen die u wilt opnemen in de sjabloon teruggeven.

<template>
  <div>(( tel ))</div>
</template>

importeer ( ref ) van "vue";
export standaard (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

reactief()

Om een reactief object of array te maken, moet je het maken met de reactief(defaultValue) methode. Je kunt de initiële waarde van dit object doorgeven via een methodeargument. De methode retourneert een proxy voor dit object, dus als je er wijzigingen in aanbrengt, Vue weet ervan en kan de weergave op de juiste manier verversen.

Samenstelling API

importeer ( reactive ) van "vue";
export standaard (
  setup() (
    const gebruiker = reactive(
      naam: "John",
      rol: "ADMIN",
    ));
    return ( gebruiker );
  ),
);

Opties API

standaard exporteren (
  gegevens() (
    terugkeren (
      gebruiker: (
        naam: "John",
        rol: "ADMIN",
      ),
    );
  ),
);

Reactive alleen werkt voor objecttypen (objecten, arrays en verzameltypen zoals Kaart en Stel in). Het kan geen primitieve types bevatten zoals string, nummer of booleaans. Dus Vue introduceert ook ref().

ref()

Om reactiviteit toe te voegen aan primitieve elementen moet je ze omwikkelen met ref().

Samenstelling API

importeer ( ref ) van "vue";
export standaard (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

Opties API

standaard exporteren (
  gegevens() (
    terugkeren (
      tel: 10,
    );
  ),
);

Reactieve objecten wijzigen

Je kunt waarden in objecten direct vanuit de reactieve methode wijzigen, maar om primitieve waarden te wijzigen moet je de .waarde veld.

importeer ( ref, reactive ) van "vue";
exporteer standaard (
  setup() (
    const gebruiker = reactive(
      naam: "John",
    ));
    user.name = "John Doe"; // Waarde wijzigen

    const count = ref(10);
    count.value = 20; // Waarde veranderen

    retourneer (
      gebruiker,
      count,
    );
  ),
);

U niet de .waarde eigenschap in de sjabloon.

<div>(( tel ))</div>

Berekende eigenschappen

Berekende eigenschappen kunnen eenvoudig worden gemaakt door een methode als parameter door te geven aan de geïmporteerde berekend() methode.

importeer ( reactive, computed ) van "vue";
exporteer standaard (
  setup() (
    const lijst = reactief([
      "Item 1",
      "Item 2",
    ]);

    // Berekend
    const isEmpty = berekend() => list.length === 0);

    return (
      lijst,
      isEmpty,
    );
  ),
);

Methoden

Je kunt ook methoden nesten in de setup methode.

Samenstelling API

importeer ( ref ) van "vue";
export standaard (
  setup() (
    const count = ref(10);

        // Methode
    const increment = () => (
      count.value++;
    );

    terugkeren (
      count,
      increment,
    );
  ),
);

Watchers

Watchers worden op dezelfde manier gemaakt als berekend. Vergeet echter niet om de proxy objectd.w.z. naamzoals in het onderstaande voorbeeld, niet de naam.waarde waarde zelf.

importeer ( watch, ref ) van "vue";
exporteer standaard (
  setup() (
    const naam = ref("John");
        // Wachter
    watch(name, (currentValue, oldValue) => (
      console.log(`Waarde gewijzigd van $(oldValue)naar $(currentValue)`);
    ));
    return ( naam );
  ),
);

Samenvatting

In dit artikel heb ik je alleen de basisprincipes van de Composition API gegeven, zodat je een algemeen begrip hebt van het verschil en de voordelen ten opzichte van de Options API. De Composition API biedt ook alternatieven voor de rest van de elementen van het component, zoals hakenen introduceert nieuwe methoden, zoals watchEffect. Het is een goed idee om het te lezen in de officiële Vue 3 documentatie.