Slutt å bruke Options API i Vue

Vue 3 introduserte en ny tilnærming til å lage komponenter kalt Sammensetning API. Det er et alternativ til Alternativer API. API-et for komposisjon er helt valgfritt, og du trenger ikke å bruke det hvis du vil bruke Vue 3. Den introduserer imidlertid noen viktige forbedringer som gjør arbeidet ditt enklere og forbedrer lesbarheten til kode.

Fordeler med Composition API fremfor Options API

1. Bedre kodeorganisering og lesbarhet.

API-et for komposisjon introduserer en ny metode kalt oppsett. Inne i den kan du opprette alle de nødvendige elementene i komponenten, for eksempel: data, metoder, beregnede egenskaper, overvåkere. Takket være dette kan du holde koden ren ved å plassere logikken som er ansvarlig for en gitt funksjon, på ett sted. Options API tvang derimot logikken til å være spredt utover hele filen. Resultatet var at koden ikke var lesbar og måtte rulles. I Composition API trenger ikke lenger metoder, watchers osv. å grupperes etter type, du kan plassere dem som du vil.

2. Trekke ut og gjenbruke logikk.

Med Composition API kan du skrive reaktiv kode hvor som helst. Du kan trekke noe reaktiv logikk utenfor komponenten. Denne typen kode kalles Komposable. Composables kan importeres i mange komponenter, slik at du kan kapsle inn noe logikk og eksponere de nødvendige reaktive elementene.

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

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

  return (
    products,
    productsCount,
    deleteProduct,
  );
)

// Komponent
import useSpoppingList fra "@/composables/shopping-list.js";
eksport standard (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    return ( products, productsCount, deleteProduct );
  ),
);

3. Enkel bruk av konstanter og eksterne ressurser i komponenten.

I Options API må du legge til f.eks. en statisk liste over elementer importert fra en annen fil i data() (noe som har en negativ innvirkning på ytelsen) eller legge den til i dette i opprettet(). Begge måtene er ikke særlig elegante. API-et for komposisjon og den nye oppsett metoden kommer til unnsetning, der du ikke bare kan eksportere reaktive ting, men også konstanter og eksterne avhengigheter.

import list fra "./list.json";
eksporter standard (
  setup() (
    return ( list );
  ),
);

4. Du kan til og med bruke Composition API i Vue 2.

Takket være den offisielle @vue/komposisjons-api plugin, kan du bruke Composition API i Vue 2 også.

Hvordan bruker jeg det nye API-et for komposisjon?

<h3>Oppsettmetode</h3>

setup() er en ny metode som er lagt til i Vue 3 hvor du kan legge inn alle nødvendige elementer som dataobjekter, metoder osv. Derfra kan du returnere elementene du ønsker å inkludere i malen.

<template>
  <div>(( count ))</div>
</template>

import ( ref ) fra "vue";
eksporter standard (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

reaktiv()

For å opprette et reaktivt objekt eller en matrise må du opprette det med reaktiv(defaultValue) metode. Du kan sende den opprinnelige verdien til dette objektet via et metodeargument. Metoden returnerer en fullmektig for dette objektet, så når du gjør endringer i det, Vue vet om dem og kan oppdatere visningen på riktig måte.

Sammensetning API

import ( reactive ) fra "vue";
eksporter standard (
  setup() (
    const user = reactive((
      navn: "John",
      rolle: "ADMIN",
    ));
    return ( bruker );
  ),
);

Alternativer API

eksporter standard (
  data() (
    return (
      bruker: (
        navn: "John",
        rolle: "ADMIN",
      ),
    );
  ),
);

Reactive bare fungerer for objekttyper (objekter, matriser og samlingstyper som Kart og Sett). Den kan ikke inneholde primitive typer som streng, antall eller boolsk. Så Vue introduserer også ref().

ref()

For å legge til reaktivitet i primitive elementer må du pakke dem inn med ref().

Sammensetning API

import ( ref ) fra "vue";
eksporter standard (
  setup() (
    const count = ref(10);
    return ( count );
  ),
);

Alternativer API

eksporter standard (
  data() (
    return (
      count: 10,
    );
  ),
);

Modifisere reaktive objekter

Du kan endre verdier i objekter direkte fra den reaktive metoden, men for å endre primitive verdier må du bruke .verdi felt.

import ( ref, reactive ) fra "vue";
eksporter standard (
  setup() (
    const user = reactive((
      navn: "John",
    ));
    user.name = "John Doe"; // Verdiendring

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

    return (
      user,
      count,
    );
  ),
);

Du ikke trenger å bruke .verdi egenskapen i malen.

<div>(( count ))</div>

Beregnede egenskaper

Beregnede egenskaper kan enkelt opprettes ved å sende en metode som en parameter til den importerte beregnet() metode.

import ( reactive, computed ) fra "vue";
eksporter standard (
  setup() (
    const list = reactive([
      "Item 1",
      "Item 2", "Item 2",
    ]);

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

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

Metoder

Du kan også hekke metoder i oppsett metode.

Sammensetning API

import ( ref ) fra "vue";
eksporter standard (
  setup() (
    const count = ref(10);

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

    return (
      count,
      økning,
    );
  ),
);

Watchers

Watchers opprettes på samme måte som beregnet. Husk imidlertid å sende fullmektig objekt, dvs. navnsom i eksempelet nedenfor, ikke navn.verdi selve verdien.

import ( watch, ref ) fra "vue";
eksporter standard (
  setup() (
    const name = ref("John");
        // Overvåker
    watch(name, (currentValue, oldValue) => (
      console.log(`Værdi endret fra $(oldValue)til $(currentValue)`);
    ));
    return ( navn );
  ),
);

Sammendrag

I denne artikkelen har jeg bare gitt deg det grunnleggende om Composition API, slik at du har en generell forståelse av hvordan det skiller seg fra Options API og hvilke fordeler det har sammenlignet med Options API. API-et Composition tilbyr også alternativer til resten av komponentens elementer, for eksempel krokerog introduserer nye metoder, som for eksempel watchEffect. Det er en god idé å lese den i den offisielle Vue 3 dokumentasjon.