Lassen Sie uns ausführlich über Vues Mixin und Vererbung sprechen

Vorwort

Mixin in Vue ist ein relativ einfacher Wissenspunkt. Entwickler, die mit CSS-Vorverarbeitungssprachen wie Less und Sass vertraut sind, müssen mit Mixin vertraut sein. Die Mixins in Vue sind fast dieselben wie die Mixins in Less usw. Sie alle fügen einige definierte Funktionen unverändert in die Vue-Komponenten ein, was der Vererbung in der objektorientierten Programmierung etwas ähnelt (ich habe nur „ähnlich“ gesagt :)).

Ein Mixin ist ein Objekt, dessen Eigenschaften die Lebenszyklus-Hooks und Eigenschaften einer Vue-Instanz oder Komponenteninstanz sein können. Wenn es global oder in eine Komponente eingemischt wird, verfügt die Vue-Instanz oder Komponenteninstanz über die im Mixin definierten Lebenszyklus-Hooks und Eigenschaften. Sollten zwischen beiden Duplikate vorhanden sein, werden diese nach bestimmten Regeln zusammengeführt.

Mischen

• Extrahieren Sie die Funktionscodes, die in mehreren Vue-Dateien wiederverwendet werden, in eine einzige JS-Datei und rufen Sie sie bei Bedarf auf.
• Definieren Sie ein Objekt in einer JS-Datei. In das Objekt können Sie Daten, Methoden, Komponenten und andere Codes schreiben, die in <script> in der Vue-Datei definiert werden können.

Mixin-Hinweis (doppelter Name)

• Wenn es eine Duplizierung zwischen dem Datenvariablennamen in der Komponente und dem Datenvariablennamen im Mixin gibt, hat die Komponente Vorrang.
• Wenn es doppelte Namen von Methoden, berechneten und „Wath“ in einer Komponente und von Methoden, berechneten und „Wath“ in einem Mixin gibt, hat die Komponente Vorrang.
• Wenn die Life-Hook-Funktion in der Komponente und die Life-Hook-Funktion im Mixin denselben Namen haben, werden beide ausgeführt, aber die Hook-Funktion in der Komponente wird zuerst ausgeführt.

Lokales Mixin

Globale Mixins

Definition und globale Registrierung

Anruf

erben

• Hinweis: Mehrfachvererbung ist hier nicht geeignet, da es häufiger zu Problemen mit Mehrfachvererbung kommt.
• Zusätzlich zur Vererbung von .vue-Dateien können Erweiterungen auch Objekte in JS-Dateien wie Mixin verwenden.
• Das HTML in der Vorlage in der Datei extends inheritance.vue kann nicht vererbt werden

Unterschied zwischen Mixin und Vererbung

• Schauen wir uns zunächst die Definition im offiziellen Dokument an. Tatsächlich können beide als Vererbung verstanden werden.
• Mixins erhalten ein Array von Objekten (was als Mehrfachvererbung verstanden werden kann);
• Was erweitert wird, ist ein Objekt oder eine Funktion (was als einfache Vererbung verstanden werden kann).
• Hinweis: Wenn eine Komponente sowohl Vererbung als auch Mixins verwendet und ein doppelter Name zwischen beiden vorliegt, überschreibt das Mixin die Vererbung.

Zusammenfassen

Dies ist das Ende dieses Artikels über Vue-Mixins und Vererbung. Weitere relevante Inhalte zu Vue-Mixins und Vererbung 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!