Javascript-verktøy i aksjon
Oppdag noen JavaScript-verktøy som kan hjelpe deg med å forbedre programmeringen. Lær mer om ESLint, Prettier og Husky!
![The Codest](https://thecodest.co/app/uploads/2024/05/reda_salmi.jpg)
Hvorfor bør du ikke bruke Options API i Due? Finn svaret på dette spørsmålet i følgende artikkel, og oppdag fordelene med Composition API.
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.
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.
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 );
),
);
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 );
),
);
Takket være den offisielle @vue/komposisjons-api
plugin, kan du bruke Composition API i Vue 2 også.
<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 );
),
);
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()
.
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,
);
),
);
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 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,
);
),
);
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 opprettes på samme måte som beregnet
. Husk imidlertid å sende fullmektig
objekt
, dvs. navn
som 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 );
),
);
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 kroker
og introduserer nye metoder, som for eksempel watchEffect
. Det er en god idé å lese den i den offisielle Vue 3 dokumentasjon.