Javascript-værktøjer i aktion
Opdag nogle værktøjer til at hente JavaScript, så du kan forbedre dit programmeringsspil. Få mere at vide om ESLint, Prettier og Husky!
![Codest](https://thecodest.co/app/uploads/2024/05/reda_salmi.jpg)
Hvorfor skal du ikke bruge Options API i Due? Find svaret på dette spørgsmål i den følgende artikel, og opdag fordelene ved Composition API.
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.
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.
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 );
),
);
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 );
),
);
Takket være den officielle @vue/komposition-api
plugin, kan du bruge Composition API i Vue 2 også.
<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 );
),
);
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()
.
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,
);
),
);
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 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,
);
),
);
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,
);
),
);
Watchers oprettes på samme måde som beregnet
. Husk dog at sende fuldmægtig
objekt
dvs. Navn
som 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 );
),
);
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. kroge
og introducerer nye metoder, som f.eks. watchEffect
. Det er en god idé at læse den i den officielle Vue 3 dokumentation.