Detaillierte Erklärung der Mixin-Verwendung in Vue

Vorwort

Wenn unser Projekt wächst, werden wir feststellen, dass es zwischen den Komponenten viele ähnliche Funktionen geben kann. Sie kopieren und fügen immer wieder dieselben Codeausschnitte (Daten, Methoden, Überwachung, Mounten usw.) ein. Wenn wir die Definition dieser Eigenschaften und Methoden in jeder Komponente wiederholen, führt dies zu Coderedundanz im Projekt und erhöht den Wartungsaufwand. Für diese Situation wird die offizielle Mixins-Funktion bereitgestellt.

1. Was sind Mixins?

Mixins, die offizielle Beschreibung, ist eine sehr flexible Möglichkeit, wiederverwendbare Funktionen in Vue-Komponenten zu verteilen. Mixins ist ein JS-Objekt, das alle funktionalen Optionen in den Skriptelementen in unseren Komponenten enthalten kann, wie z. B. Daten, Komponenten, Methoden, erstellt, berechnet usw. Wir müssen nur die gemeinsamen Funktionen als Objekt an die Mixins-Option übergeben. Wenn die Komponente das Mixins-Objekt verwendet, werden alle Optionen des Mixins-Objekts in die Optionen der Komponente selbst gemischt. Dadurch wird die Wiederverwendbarkeit des Codes verbessert und Ihr Code bleibt sauber und leicht zu warten.

2. Wann verwendet man Mixins?

Wenn wir in mehreren Komponenten ähnliche Daten oder Funktionen haben, können wir Mixins verwenden, um die gemeinsamen Teile zu extrahieren. Durch die von Mixins gekapselten Funktionen ändern Komponenten, die sie aufrufen, den externen Gültigkeitsbereich der Funktion nicht.

3. Wie erstelle ich Mixins?

Erstellen Sie einen „Mixins“-Ordner im „src“-Verzeichnis und erstellen Sie eine „myMixins.js“-Datei im Ordner. Wie bereits erwähnt, ist Mixins ein JS-Objekt, daher sollte myMixins in Form eines Objekts definiert werden. Im Objekt können wir unsere Daten, Komponenten, Methoden, erstellten, berechneten und anderen Eigenschaften genau wie bei Vue-Komponenten definieren und das Objekt über Export exportieren.

4. Wie verwende ich Mixins?

Importieren Sie die Datei myMixins.js in die Komponente, die Sie aufrufen müssen, und importieren Sie dann die benötigten Objekte in den Exportstandard.

5. Eigenschaften von Mixins

[5.1] Methoden und Parameter werden nicht zwischen Komponenten geteilt. Obwohl eine Komponente Mixins aufruft und ihre Eigenschaften in ihre eigene Komponente einfügt, werden ihre Eigenschaften nur von der aktuellen Komponente erkannt und nicht geteilt. Mit anderen Worten: Andere Komponenten können die Daten und Methoden in Mixins nicht von der aktuellen Komponente abrufen.

①Zuerst definieren wir ein Altersfeld und eine getAge-Methode im gemischten Objekt myMixins.js

exportiere const myMixins = {
Komponenten: {},
Daten() {
zurückkehren {
Alter: 18,
}
},
montiert() {
dies.getAge()
},
Methoden: {
getAge() {
console.log(dieses.Alter)
}
}
}

② Führen Sie in Komponente 1 die Operation +1 für die Nummer aus.

importiere { myMixins } aus "@/mixins/myMixins.js";
Standard exportieren {
Mixins: [myMixins],
Daten() {
zurückkehren {}
},
erstellt() {
dieses.Alter++
},
}

③Komponente 2 funktioniert nicht

Standard exportieren {
Mixins: [myMixins],
Daten() {
zurückkehren {}
},
}

④Wir wechseln jeweils zu zwei Seiten, um die Konsolenausgabe anzuzeigen. Sie werden feststellen, dass Komponente 1 den Wert im Alter ändert und der Alterswert in Komponente 2 immer noch der Anfangswert des gemischten Objekts ist und sich durch das Hinzufügen von Komponente 1 nicht geändert hat.

[5.2] Nach der Einführung von Mixins werden die Komponenten diese zusammenführen und die Daten und Methoden in Mixins auf die aktuelle Komponente erweitern. Während des Zusammenführungsprozesses können Konflikte auftreten. Als Nächstes erfahren wir mehr über Konflikte bei der Zusammenführung von Mixins.

6. Mixins-Zusammenführungskonflikte

[6.1] Optionen, deren Werte Objekte (Komponenten, Methoden, Berechnungen, Daten) sind, werden beim Mischen in Komponenten zusammengeführt. Bei Schlüsselkonflikten hat die Komponente Vorrang und die Schlüssel in der Komponente überschreiben die Schlüssel im gemischten Objekt.

① Wir fügen dem gemischten Objekt das Altersattribut sowie die Methoden getAge1 und getAge2 hinzu

// myMixins.js
exportiere const myMixins = {
Komponenten: {},
Daten() {
zurückkehren {
Alter: 18,
}
},
Methoden: {
getAge1() {
console.log("Alter1 von Mixins =", dieses.Alter )
},
getAge2() {
console.log("Alter2 von Mixins =", dieses.Alter )
},
}
}

②In der Komponente, die die myMixins-Datei eingeführt hat, haben wir das Altersattribut sowie die Methoden getAge1 und getAge3 hinzugefügt

// Vorlage.vue
importiere { myMixins } aus "@/mixins/myMixins.js";
Standard exportieren {
Mixins: [myMixins],
Daten() {
zurückkehren {
Alter: 20,
}
},
montiert() {
dies.getAge1();
dies.getAge2();
dies.getAge3();
},
Methoden: {
getAge1() {
console.log('Alter1 von Vorlage =', dieses.Alter)
},
getAge3() {
console.log('Alter3 von Vorlage =', dieses.Alter)
},
}
}

③ Wir werden feststellen, dass das Alter in der Komponente das Alter des gemischten Objekts überschreibt und die getAge1-Methode der Komponente die getAge1-Methode des gemischten Objekts überschreibt

[6.2] Optionen, deren Werte Funktionen sind (erstellt, gemountet), werden zusammengeführt und aufgerufen, wenn sie in Komponenten gemischt werden. Die Hook-Funktionen im gemischten Objekt werden vor den Hook-Funktionen in der Komponente aufgerufen.

7. Unterschiede zu vuex

vuex: wird für die Statusverwaltung verwendet. Die darin definierten Variablen können in jeder Komponente verwendet und geändert werden. Nachdem der Wert dieser Variablen in einer Komponente geändert wurde, wird auch der Wert dieser Variablen in anderen Komponenten entsprechend geändert.

Mixins: Sie können gemeinsam genutzte Variablen definieren und in jeder Komponente verwenden. Nach der Einführung in eine Komponente ist jede Variable unabhängig von den anderen und Wertänderungen wirken sich in der Komponente nicht gegenseitig aus.

8. Unterschiede zu öffentlichen Komponenten

Komponente: Das Einfügen einer Komponente in eine übergeordnete Komponente entspricht dem Zuweisen eines unabhängigen Speicherplatzes in der übergeordneten Komponente zur Verwendung durch die untergeordnete Komponente und dem anschließenden Übergeben von Werten gemäß den Eigenschaften. Im Wesentlichen sind die beiden jedoch relativ unabhängig.

Mixins: Nachdem die Komponente eingeführt wurde, wird sie mit den Objekten und Methoden in der Komponente zusammengeführt, was der Erweiterung der Objekte und Methoden der übergeordneten Komponente entspricht. Dies kann als Bildung einer neuen Komponente verstanden werden.

Dies ist das Ende dieses Artikels über Vues detaillierte Erklärung zur Verwendung von Mixins. Weitere relevante Inhalte zu Vue-Mixins finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!