Javascript-työkalut toiminnassa
Tutustu joihinkin JavaScript-työkaluihin, joilla voit parantaa ohjelmointipeliäsi. Lue lisää ESLintistä, Prettieristä ja Huskysta!
![Codest](https://thecodest.co/app/uploads/2024/05/reda_salmi.jpg)
Miksi sinun ei pitäisi käyttää Options API:ta Due:ssa? Etsi vastaus tähän kysymykseen seuraavasta artikkelista ja tutustu Composition API:n etuihin.
Vue 3 esitteli uuden lähestymistavan komponenttien luomiseen nimeltä Koostumus API
. Se on vaihtoehto Vaihtoehtojen API
. Composition API on täysin valinnainen, eikä sinun tarvitse käyttää sitä, jos haluat käyttää Vue 3. Se sisältää kuitenkin joitakin tärkeitä parannuksia, jotka helpottavat työtäsi ja parantavat luettavuutta. koodi.
Composition API esittelee uuden metodin nimeltä setup
. Sen sisällä voit luoda kaikki komponentin tarvittavat elementit, kuten: tiedot
, menetelmät
, laskennalliset ominaisuudet
, tarkkailijat
. Tämän ansiosta voit pitää koodin siistinä sijoittamalla tietystä ominaisuudesta vastaavan logiikan yhteen paikkaan. Sitä vastoin Options API pakotti logiikan hajauttamaan sen eri puolille tiedostoa. Tämän seurauksena koodi ei ollut luettavaa ja vaati vierittämistä. Composition API:ssa metodeja, tarkkailijoita jne. ei enää tarvitse ryhmitellä tyypin mukaan, vaan voit sijoittaa ne haluamallasi tavalla.
Composition API:n avulla voit kirjoittaa reaktiivista koodia missä tahansa. Voit vetää osan reaktiivisesta logiikasta komponentin ulkopuolelle. Tällaista koodia kutsutaan Yhdistelmät
. Komposiitit voidaan tuoda moniin komponentteihin, ja niiden avulla voit kapseloida osan logiikasta ja paljastaa tarvittavat reaktiiviset elementit.
// shopping-list.js
import ( computed ) from "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,
);
)
// Komponentti
import useSpoppingList from "@/composables/shopping-list.js";
export default (
setup() (
const ( products, productsCount, deleteProduct ) = useSpoppingList();
return ( products, productsCount, deleteProduct );
),
);
Jos haluat lisätä Options API:ssa esimerkiksi staattisen luettelon toisesta tiedostosta tuoduista kohteista, sinun on lisättävä se data()-funktioon (millä on kielteinen vaikutus suorituskykyyn) tai lisättävä se kohtaan tämä
osoitteessa created()
. Molemmat tavat eivät ole kovin tyylikkäitä. Composition API ja uusi setup
metodi, josta voit viedä reaktiivisten asioiden lisäksi myös vakioita ja ulkoisia riippuvuuksia.
import list from "./list.json";
export default (
setup() (
return ( list );
),
);
Kiitos virallisen @vue/composition-api
laajennuksen avulla voit käyttää Composition API:ta Vue 2 myös.
<h3>Asetusmenetelmä</h3>
setup() on uusi menetelmä, joka on lisätty Vue 3 johon voit laittaa kaikki tarvittavat elementit, kuten dataobjektit, metodit jne. Sieltä voit palauttaa elementit, jotka haluat sisällyttää malliin.
<template>
<div>(( count ))</div>
</template>
import ( ref ) from "vue";
export default (
setup() (
const count = ref(10);
return ( count );
),
);
Luodaksesi reaktiivisen objektin tai joukon sinun täytyy luoda se komennolla reactive(defaultValue)
menetelmä. Voit antaa tämän objektin alkuarvon menetelmän argumentin kautta. Metodi palauttaa proxy
tälle objektille, joten kun teet siihen muutoksia, Vue tietää niistä ja voi päivittää näkymän asianmukaisesti.
Koostumus API
import ( reactive ) from "vue";
export default (
setup() (
const user = reactive((
name: "John",
rooli: "ADMIN",
));
return ( user );
),
);
Vaihtoehtojen API
viedä oletusarvoisesti (
data() (
return (
user: (
name: "John",
rooli: "ADMIN",
),
);
),
);
Reactive vain toimii objektityypeille (objektit, matriisit ja kokoelmatyypit, kuten esim. Kartta
ja Aseta
). Se ei voi pitää sisällään primitiivisiä tyyppejä, kuten merkkijono
, numero
tai boolean
. Joten Vue tuo myös ref()
.
Lisätäksesi reaktiivisuutta primitiivisiin elementteihin sinun täytyy kietoa ne kanssa ref()
.
Koostumus API
import ( ref ) from "vue";
export default (
setup() (
const count = ref(10);
return ( count );
),
);
Vaihtoehtojen API
viedä oletusarvoisesti (
data() (
return (
count: 10,
);
),
);
Voit muuttaa objektien arvoja suoraan reaktiivisesta metodista, mutta primitiivisten arvojen muuttamiseksi sinun on käytettävä komentoa .value
kenttä.
import ( ref, reactive ) from "vue";
export default (
setup() (
const user = reactive((
name: "John",
));
user.name = "John Doe"; // Arvon muutos
const count = ref(10);
count.value = 20; // arvon muutos
return (
user,
count,
);
),
);
Sinä Älä... täytyy käyttää .value
ominaisuus mallissa.
<div>(( count ))</div>
Laskennalliset ominaisuudet voidaan luoda helposti välittämällä metodi parametrina tuodulle metodille nimeltä computed()
menetelmä.
import ( reactive, computed ) from "vue";
export default (
setup() (
const list = reactive([
"Item 1",
"Item 2",
]);
// Laskettu
const isEmpty = computed(() => list.length === 0);
return (
list,
isEmpty,
);
),
);
Voit myös sijoittaa metodeja setup
menetelmä.
Koostumus API
import ( ref ) from "vue";
export default (
setup() (
const count = ref(10);
// Metodi
const increment = () => (
count.value++;
);
return (
count,
increment,
);
),
);
Tarkkailijat luodaan samalla tavalla kuin laskettu
. Muista kuitenkin siirtää proxy
kohde
, ts. nimi
, kuten alla olevassa esimerkissä, ei name.value
arvo itse.
import ( watch, ref ) from "vue";
export default (
setup() (
const name = ref("John");
// Watcher
watch(name, (currentValue, oldValue) => ( (
console.log(`Arvo muuttui $(oldValue)sta $(currentValue)`);
));
return ( nimi );
),
);
Tässä artikkelissa olen esitellyt vain Composition API:n perusteet, jotta sinulla olisi yleiskäsitys siitä, miten se eroaa ja mitä etuja sillä on Options API:han verrattuna. Composition API tarjoaa myös vaihtoehtoja muille komponentin elementeille, kuten esim. koukut
ja esittelee uusia menetelmiä, kuten watchEffect
. Se on hyvä lukea virallisesta versiosta. Vue 3 dokumentaatio.