Sluta använda Options API i Vue

Vue 3 introducerade en ny metod för att skapa komponenter som kallas Sammansättning API. Det är ett alternativ till Alternativ API. API:et Composition är helt valfritt och du behöver inte använda det om du vill använda Vue 3. Den innehåller dock några viktiga förbättringar som underlättar ditt arbete och förbättrar läsbarheten av kod.

Fördelar med Composition API jämfört med Options API

1. Bättre kodorganisation och läsbarhet.

API:et Composition introducerar en ny metod som heter inställning. Inuti den kan du skapa alla nödvändiga element i komponenten, t.ex: data, Metoder, beräknade egenskaper, tittare. Tack vare detta kan du hålla koden ren genom att placera den logik som ansvarar för en viss funktion på ett ställe. Options API tvingade däremot fram en spridning av logiken i hela filen. Som ett resultat var koden inte läsbar och krävde rullning. I Composition API behöver metoder, watchers etc. inte längre grupperas efter typ, utan du kan placera dem som du vill.

2. Extrahera ut och återanvända logik.

API:et Composition gör att du kan skriva reaktiv kod var som helst. Du kan dra ut en del reaktiv logik utanför komponenten. Den här typen av kod kallas Komposterbara. Composables kan importeras till många komponenter och gör att du kan kapsla in viss logik och exponera de nödvändiga reaktiva elementen.

// shopping-lista.js
importera ( beräknad ) från "vue";

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

  return (
    produkter,
    productsCount,
    deleteProduct,
  );
)

// Komponent
import useSpoppingList från "@/composables/shopping-list.js";
export standard (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList();
    returnera ( produkter, productsCount, deleteProduct );
  ),
);

3. Använd enkelt konstanter och externa resurser i komponenten.

Om du vill lägga till t.ex. en statisk lista med objekt som importerats från en annan fil i Options API måste du lägga till den i data() (vilket har en negativ inverkan på prestandan) eller lägga till den i detta i skapad(). Båda sätten är inte särskilt eleganta. API:et Composition och det nya inställning metoden kommer till undsättning, från vilken du kan exportera inte bara reaktiva saker utan även konstanter och externa beroenden.

importera lista från "./list.json";
exportera default (
  setup() (
    returnera ( lista );
  ),
);

4. Du kan även använda API:et Composition i Vue 2.

Tack vare den officiella @vue/komposition-api plugin, kan du använda Composition API i Vue 2 också.

Hur använder man det nya Composition API?

<h3>Metod för inställning</h3>

setup() är en ny metod som lagts till i Vue 3 där du kan lägga in alla nödvändiga objekt som dataobjekt, metoder etc. Därifrån kan du returnera de element som du vill inkludera i mallen.

<template>
  <div>(( räkna ))</div>
</template>

importera ( ref ) från "vue";
exportera standard (
  setup() (
    const count = ref(10);
    returnera ( count );
  ),
);

reaktiv()

För att skapa ett reaktivt objekt eller en reaktiv array måste du skapa det med reaktiv(defaultValue) metod. Du kan skicka det initiala värdet för detta objekt via ett metodargument. Metoden returnerar ett fullmakt för det här objektet, så när du gör ändringar i det, Vue känner till dem och kan uppdatera vyn på rätt sätt.

Sammansättning API

import ( reactive ) från "vue";
exportera standard (
  setup() (
    const användare = reaktiv((
      namn: "John",
      roll: "ADMIN",
    ));
    returnera ( användare );
  ),
);

Alternativ API

exportera standard (
  data() (
    returnera (
      användare: (
        namn: "John",
        roll: "ADMIN",
      ),
    );
  ),
);

Reactive endast fungerar för objekttyper (objekt, matriser och samlingstyper som t.ex. Karta och Ställ in). Den kan inte innehålla primitiva typer som sträng, antal eller boolean. Så Vue introducerar också ref().

ref()

För att lägga till reaktivitet till primitiva element måste du linda in dem med ref().

Sammansättning API

importera ( ref ) från "vue";
exportera standard (
  setup() (
    const count = ref(10);
    returnera ( count );
  ),
);

Alternativ API

exportera standard (
  data() (
    returnera (
      räkna: 10,
    );
  ),
);

Modifiering av reaktiva objekt

Du kan ändra värden i objekt direkt från den reaktiva metoden, men för att ändra primitiva värden måste du använda .värde fält.

import ( ref, reactive ) från "vue";
exportera standard (
  setup() (
    const användare = reaktiv((
      namn: "John",
    ));
    user.name = "John Doe"; // Värdeförändring

    const count = ref(10);
    count.value = 20; // Värdeförändring

    returnera (
      användare,
      count,
    );
  ),
);

Du inte behöver använda .värde egenskap i mallen.

<div>(( räkna ))</div>

Beräknade egenskaper

Beräknade egenskaper kan enkelt skapas genom att skicka en metod som en parameter till den importerade beräknad() metod.

import ( reactive, computed ) från "vue";
exportera standard (
  setup() (
    const list = reaktiv([
      "Föremål 1",
      "Föremål 2",
    ]);

    // Beräknad
    const isEmpty = computed(() => list.length === 0);

    returnera (
      lista,
      isEmpty,
    );
  ),
);

Metoder

Du kan också nesta metoder i inställning metod.

Sammansättning API

importera ( ref ) från "vue";
exportera standard (
  setup() (
    const count = ref(10);

        // Metod
    const increment = () => (
      count.värde++;
    );

    returnera (
      räkna,
      ökning,
    );
  ),
);

Övervakare

Watchers skapas på ett liknande sätt som beräknad. Kom dock ihåg att skicka fullmakt objekt, d.v.s. namnsom i exemplet nedan, inte namn.värde värde i sig.

importera ( watch, ref ) från "vue";
exportera standard (
  setup() (
    const namn = ref("John");
        // Vaktare
    watch(name, (currentValue, oldValue) => (
      console.log(`Värdet ändrades från $(gammaltVärde)till $(aktuelltVärde)`);
    ));
    return ( namn );
  ),
);

Sammanfattning

I den här artikeln har jag bara gett dig grunderna i Composition API så att du har en allmän förståelse för hur det skiljer sig och vilka fördelar det har jämfört med Options API. Composition API tillhandahåller också alternativ till resten av komponentens element, till exempel krokaroch introducerar nya metoder, till exempel seEffekt. Det är en bra idé att läsa den i den officiella Vue 3 dokumentation.