Javascript-Tools in Aktion
Entdecken Sie einige JavaScript-Tools, um Ihr Programmierspiel zu verbessern. Erfahren Sie mehr über ESLint, Prettier und Husky!
![Der Codest](https://thecodest.co/app/uploads/2024/05/reda_salmi.jpg)
Warum sollten Sie Options API in Due nicht verwenden? Finden Sie die Antwort auf diese Frage im folgenden Artikel und entdecken Sie die Vorteile der Composition API.
Vue 3 wurde ein neuer Ansatz zur Erstellung von Komponenten eingeführt, der Zusammensetzung API
. Es ist eine Alternative zum Optionen API
. Die Kompositions-API ist völlig optional und Sie brauchen sie nicht zu verwenden, wenn Sie die Vue 3. Sie führt jedoch einige wichtige Verbesserungen ein, die Ihnen die Arbeit erleichtern und die Lesbarkeit des Dokuments verbessern. Code.
Die Composition API führt eine neue Methode namens Einrichtung
. Darin können Sie alle notwendigen Elemente der Komponente erstellen, wie z. B.: Daten
, Methoden
, berechnete Eigenschaften
, Beobachter
. Dadurch können Sie den Code sauber halten, indem Sie die Logik, die für eine bestimmte Funktion verantwortlich ist, an einer Stelle platzieren. Im Gegensatz dazu war die Options-API gezwungen, die Logik über die gesamte Datei zu verstreuen. Dies führte dazu, dass der Code nicht mehr lesbar war und ein Scrollen erforderlich machte. In der Composition-API müssen Methoden, Watcher usw. nicht mehr nach Typ gruppiert werden, sondern können nach eigenem Ermessen angeordnet werden.
Mit der Composition API können Sie überall reaktiven Code schreiben. Sie können einige reaktive Logik außerhalb der Komponente ziehen. Diese Art von Code wird als Verbrauchsmaterialien
. Composables können in viele Komponenten importiert werden und ermöglichen es Ihnen, einige Logik zu kapseln und die notwendigen reaktiven Elemente freizulegen.
// shopping-list.js
import ( computed ) from "vue";
export function useShoppingList(listId) (
const products = shoppingList.getAllProducts(listId);
const productsCount = errechnet(() => products.value.length);
const deleteProduct = (productId) => shoppingList.deleteProduct(productId);
return (
products,
productsCount,
deleteProduct,
);
)
// Komponente
importiere useSpoppingList aus "@/composables/shopping-list.js";
export default (
setup() (
const ( products, productsCount, deleteProduct ) = useSpoppingList();
return ( products, productsCount, deleteProduct );
),
);
In der Options-API müssen Sie, um z. B. eine statische Liste von Elementen hinzuzufügen, die aus einer anderen Datei importiert wurden, diese zu data() hinzufügen (was sich negativ auf die Leistung auswirkt) oder sie zu diese
in erstellt()
. Beide Wege sind nicht sehr elegant. Die Kompositions-API und das neue Einrichtung
Methode zu Hilfe, mit der Sie nicht nur reaktive Dinge, sondern auch Konstanten und externe Abhängigkeiten exportieren können.
importiere Liste aus "./list.json";
export default (
setup() (
return ( list );
),
);
Dank der offiziellen @vue/composition-api
Plugin können Sie die Composition API in Vue 2 auch.
<h3>Setup-Methode</h3>
setup() ist eine neue Methode, die in Vue 3 wo Sie alle notwendigen Elemente wie Datenobjekte, Methoden usw. einfügen können. Von dort aus können Sie die Elemente zurückgeben, die Sie in die Vorlage aufnehmen möchten.
<template>
<div>(( count ))</div>
</template>
import ( ref ) von "vue";
export default (
setup() (
const count = ref(10);
return ( count );
),
);
Um ein reaktives Objekt oder Array zu erstellen, müssen Sie es mit der reaktiv(StandardWert)
Methode. Sie können den Anfangswert dieses Objekts über ein Methodenargument übergeben. Die Methode gibt ein Proxy
für dieses Objekt, wenn Sie also Änderungen daran vornehmen, Vue kennt sie und kann die Ansicht entsprechend aktualisieren.
Zusammensetzung API
import ( reactive ) from "vue";
export default (
setup() (
const user = reactive((
name: "John",
Rolle: "ADMIN",
));
return ( user );
),
);
Optionen API
Standard exportieren (
data() (
return (
Benutzer: (
name: "John",
Rolle: "ADMIN",
),
);
),
);
Reactive nur funktioniert für Objekttypen (Objekte, Arrays und Sammlungstypen wie Karte
und Einstellung
). Er kann keine primitiven Typen enthalten, wie z. B. String
, Nummer
oder boolean
. Vue führt also auch ein ref()
.
Um primitiven Elementen Reaktivität zu verleihen, müssen Sie sie mit ref()
.
Zusammensetzung API
import ( ref ) von "vue";
export default (
setup() (
const count = ref(10);
return ( count );
),
);
Optionen API
Standard exportieren (
data() (
return (
Anzahl: 10,
);
),
);
Sie können Werte in Objekten direkt in der reaktiven Methode ändern, aber um primitive Werte zu ändern, müssen Sie die .wert
Feld.
import ( ref, reactive ) from "vue";
export default (
setup() (
const user = reactive((
Name: "John",
));
user.name = "John Doe"; // Wertänderung
const count = ref(10);
count.value = 20; // Wertänderung
zurückgeben (
user,
count,
);
),
);
Sie nicht müssen die .wert
Eigenschaft in der Vorlage.
<div>(( count ))</div>
Berechnete Eigenschaften können einfach erstellt werden, indem man eine Methode als Parameter an die importierte berechnet()
Methode.
import ( reactive, computed ) from "vue";
export default (
setup() (
const list = reactive([
"Element 1",
"Element 2",
]);
// Berechnet
const isEmpty = berechnet(() => list.length === 0);
return (
list,
isEmpty,
);
),
);
Sie können auch Methoden in der Einrichtung
Methode.
Zusammensetzung API
import ( ref ) von "vue";
export default (
setup() (
const count = ref(10);
// Methode
const increment = () => (
count.value++;
);
return (
count,
Inkrement,
);
),
);
Beobachter werden auf ähnliche Weise erstellt wie berechnet
. Denken Sie jedoch daran, die Proxy
Objekt
d.h. Name
wie im folgenden Beispiel, nicht die Name.Wert
Wert selbst.
import ( watch, ref ) from "vue";
export default (
setup() (
const name = ref("John");
// Beobachter
watch(name, (currentValue, oldValue) => (
console.log(`Wert geändert von $(oldValue)auf $(currentValue)`);
));
return ( name );
),
);
In diesem Artikel habe ich Ihnen nur die Grundlagen der Composition-API erläutert, damit Sie ein allgemeines Verständnis dafür haben, wie sie sich von der Options-API unterscheidet und welche Vorteile sie im Vergleich zu dieser hat. Die Composition-API bietet auch Alternativen zu den übrigen Elementen der Komponente, wie z. B. Häkchen
und führt neue Methoden ein, wie z. B. watchEffect
. Es ist eine gute Idee, sie in der offiziellen Vue 3 Dokumentation.