Stop med at bruge Options API i Vue

Vue 3 introducerede en ny tilgang til at skabe komponenter kaldet Sammensætning API. Det er et alternativ til Indstillinger API. Composition API'en er helt valgfri, og du behøver ikke at bruge den, hvis du vil bruge Vue 3. Men den introducerer nogle vigtige forbedringer, der gør dit arbejde lettere og forbedrer læsbarheden af Kode.

Fordele ved Composition API frem for Options API

1. Bedre organisering og læsbarhed af koden.

Composition API'en introducerer en ny metode, der hedder Opsætning. Inde i den kan du oprette alle de nødvendige elementer i komponenten, f.eks: data, metoder, Beregnede egenskaber, Tilskuere. Takket være dette kan du holde koden ren ved at placere den logik, der er ansvarlig for en given funktion, ét sted. I modsætning hertil tvang Options API'en til at sprede logikken ud over hele filen. Som følge heraf var koden ikke læsbar og krævede scrolling. I Composition API behøver metoder, watchers osv. ikke længere at blive grupperet efter type, du kan placere dem, som det passer dig.

2. Udtræk og genbrug af logik.

Composition API giver dig mulighed for at skrive reaktiv kode hvor som helst. Du kan trække noget reaktiv logik uden for komponenten. Denne type kode kaldes Sammensatte produkter. Composables kan importeres i mange komponenter og giver dig mulighed for at indkapsle noget logik og eksponere de nødvendige reaktive elementer.

// indkøbsliste.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. Brug nemt konstanter og eksterne ressourcer i komponenten.

For at tilføje f.eks. en statisk liste over elementer, der er importeret fra en anden fil, skal du i Options-API'en tilføje den til data() (hvilket har en negativ indvirkning på ydeevnen) eller tilføje den til dette i oprettet(). Begge måder er ikke særlig elegante. Composition API'en og den nye Opsætning metoden kommer til undsætning, hvorfra du ikke kun kan eksportere reaktive ting, men også konstanter og eksterne afhængigheder.

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

4. Du kan endda bruge Composition API i Vue 2.

Takket være den officielle @vue/komposition-api plugin, kan du bruge Composition API i Vue 2 også.

Hvordan bruger man den nye Composition API?

<h3>Opsætningsmetode</h3>

setup() er en ny metode, der er tilføjet i Vue 3 hvor du kan placere alle de nødvendige elementer som dataobjekter, metoder osv. Derfra kan du returnere de elementer, du vil have med i skabelonen.

<template>
  <div>(( tælle ))</div>
</template>

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

reaktiv()

For at oprette et reaktivt objekt eller array skal du oprette det med reaktiv(defaultValue) metode. Du kan sende den oprindelige værdi af dette objekt via et metodeargument. Metoden returnerer en fuldmægtig for dette objekt, så når du foretager ændringer i det, Vue kender til dem og kan opdatere visningen korrekt.

Sammensætning API

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

Indstillinger API

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

Reactive kun fungerer for objekttyper (objekter, arrays og samlingstyper som f.eks. Kort og Sæt). Den kan ikke indeholde primitive typer som f.eks. streng, nummer eller boolsk. Så Vue introducerer også ref().

ref()

For at tilføje reaktivitet til primitive elementer skal du pakke dem ind med ref().

Sammensætning API

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

Indstillinger API

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

Ændring af reaktive objekter

Du kan ændre værdier i objekter direkte fra den reaktive metode, men for at ændre primitive værdier skal du bruge .værdi felt.

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

    const count = ref(10);
    count.value = 20; // Værdiændring

    return (
      bruger,
      count,
    );
  ),
);

Du gør det ikke nødt til at bruge .værdi egenskab i skabelonen.

<div>(( tælle ))</div>

Beregnede egenskaber

Beregnede egenskaber kan nemt oprettes ved at sende en metode som parameter til den importerede beregnet() metode.

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

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

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

Metoder

Du kan også indlejre metoder i Opsætning metode.

Sammensætning API

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

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

    return (
      count,
      forøgelse,
    );
  ),
);

Seere

Watchers oprettes på samme måde som beregnet. Husk dog at sende fuldmægtig objektdvs. Navnsom i eksemplet nedenfor, ikke navn.værdi selve værdien.

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

Sammenfatning

I denne artikel har jeg kun givet dig det grundlæggende om Composition API'en, så du har en generel forståelse af, hvordan den adskiller sig, og hvilke fordele den har i forhold til Options API'en. Composition API'en giver også alternativer til resten af komponentens elementer, f.eks. krogeog introducerer nye metoder, som f.eks. watchEffect. Det er en god idé at læse den i den officielle Vue 3 dokumentation.