Javascript tööriistad tegevuses
Avastage mõningaid vahendeid JavaScript, et tõsta oma programmeerimismängu taset. Lisateave ESLint, Prettier ja Husky kohta!

Miks te ei peaks kasutama Options API-d Due's? Leia vastus sellele küsimusele järgmises artiklis ja avasta Composition API eelised.
Vue 3 võttis kasutusele uue lähenemisviisi komponentide loomiseks nimega Koostis API
. See on alternatiiviks Valikute API
. Composition API on täiesti vabatahtlik ja te ei pea seda kasutama, kui soovite kasutada Vue 3. See toob aga sisse mõned olulised parandused, mis lihtsustavad teie tööd ja parandavad loetavust. kood.
Kompositsiooni API toob sisse uue meetodi nimega setup
. Selle sees saab luua kõik komponendi vajalikud elemendid, näiteks: andmed
, meetodid
, arvutatud omadused
, vaatajad
. Tänu sellele saate hoida koodi puhtana, paigutades konkreetse funktsiooni eest vastutava loogika ühte kohta. Seevastu Options API sundis loogika hajutamist üle kogu faili. Selle tulemusena oli kood loetamatu ja nõudis kerimist. Composition APIs ei pea meetodid, vaatlejad jne enam tüübi järgi rühmitama, neid saab paigutada nii, nagu ise heaks arvate.
Koostamise API võimaldab teil kirjutada reaktiivset koodi kõikjal. Saate tõmmata osa reaktiivsest loogikast väljapoole komponenti. Seda tüüpi koodi nimetatakse Komposiitmaterjalid
. Komposiitmooduleid saab importida paljudesse komponentidesse ja need võimaldavad kapseldada mõningaid loogikaid ja eksponeerida vajalikke reaktiivseid elemente.
// 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,
);
)
// Komponent
import useSpoppingList from "@/composables/shopping-list.js";
export default (
setup() (
const ( products, productsCount, deleteProduct ) = useSpoppingList();
return ( products, productsCount, deleteProduct );
),
);
Valikute API-s tuleb näiteks teisest failist imporditud staatilise elemendiloendi lisamiseks lisada see data() (mis mõjutab negatiivselt jõudlust) või lisada see faili see
aadressil created()
. Mõlemad viisid ei ole väga elegantsed. Kompositsiooni API ja uus setup
meetod tuleb appi, millest saab eksportida mitte ainult reaktiivseid asju, vaid ka konstante ja väliseid sõltuvusi.
import list from "./list.json";
eksportida vaikimisi (
setup() (
return ( list );
),
);
Tänu ametlikule @vue/composition-api
plugin, saate kasutada Composition API-d Vue 2 samuti.
<h3>Seadistamismeetod</h3>
setup() on uus meetod, mis on lisatud Vue 3 kuhu saab panna kõik vajalikud elemendid, nagu andmeobjektid, meetodid jne. Sealt saate tagastada elemendid, mida soovite malli lisada.
<template>
<div>(( count ))</div>
</template>
import ( ref ) from "vue";
export default (
setup() (
const count = ref(10);
return ( count );
),
);
Reaktiivse objekti või massiivi loomiseks tuleb see luua käsuga reaktiivne(defaultValue)
meetod. Selle objekti algväärtuse saab meetodi argumendina üle anda. Meetod tagastab proxy
selle objekti jaoks, nii et kui te seda muudate, Vue teab neist ja saab vaateid korralikult värskendada.
Koostis API
import ( reactive ) from "vue";
export default (
setup() (
const user = reactive((
name: "John",
roll: "ADMIN",
));
return ( user );
),
);
Valikute API
eksportida vaikimisi (
data() (
return (
user: (
name: "John",
roll: "ADMIN",
),
);
),
);
Reactive ainult töötab objektitüüpide puhul (objektid, massiivid ja kollektsioonitüübid, näiteks Kaart
ja Komplekt
). See ei saa sisaldada selliseid primitiivseid tüüpe nagu string
, number
või boolean
. Nii et Vue tutvustab ka ref()
.
Reaktiivsuse lisamiseks primitiivsetele elementidele tuleb need ümbritseda ref()
.
Koostis API
import ( ref ) from "vue";
export default (
setup() (
const count = ref(10);
return ( count );
),
);
Valikute API
eksportida vaikimisi (
data() (
return (
count: 10,
);
),
);
Objektide väärtusi saab muuta otse reaktiivsest meetodist, kuid primitiivsete väärtuste muutmiseks tuleb kasutada meetodit .value
valdkond.
import ( ref, reactive ) from "vue";
export default (
setup() (
const user = reactive((
name: "John",
));
user.name = "John Doe"; // Väärtuse muutmine
const count = ref(10);
count.value = 20; // Väärtuse muutus
return (
user,
count,
);
),
);
Sa ei on vaja kasutada .value
omadus mallil.
<div>(( count ))</div>
Arvutatud omadusi saab hõlpsasti luua, andes meetodi parameetrina üle imporditud computed()
meetod.
import ( reactive, computed ) from "vue";
export default (
setup() (
const list = reactive([
"Item 1",
"Item 2",
]);
// Computed
const isEmpty = computed(() => list.length === 0);
return (
list,
isEmpty,
);
),
);
Saate ka pesitseda meetodeid setup
meetod.
Koostis API
import ( ref ) from "vue";
export default (
setup() (
const count = ref(10);
// Meetod
const increment = () => (
count.value++;
);
return (
count,
increment,
);
),
);
Vaatlejad luuakse sarnaselt arvutuslik
. Kuid ärge unustage, et läbida proxy
objekt
, st. nimi
, nagu alljärgnevas näites, mitte name.value
väärtus ise.
import ( watch, ref ) from "vue";
export default (
setup() (
const name = ref("John");
// Watcher
watch(name, (currentValue, oldValue) => (
console.log(`Väärtus muutus $(oldValue)-lt $(currentValue)`);
));
return ( name );
),
);
Selles artiklis olen tutvustanud teile ainult põhitõdesid Composition API kohta, et teil oleks üldine arusaam sellest, kuidas see erineb ja millised on selle eelised võrreldes Options APIga. Composition API pakub ka alternatiive ülejäänud komponendi elementidele, näiteks konksud
ja tutvustab uusi meetodeid, näiteks watchEffect
. See on hea mõte lugeda seda ametlikus Vue 3 dokumentatsioon.