So verwenden Sie Vue3-Mixin

Vue 2 verwendet optionale APIs wie Daten-, Methoden-, Überwachungs-, Berechnungs- und Lebenszyklus-Hook-Funktionen.

mixin bietet eine sehr flexible Möglichkeit, wiederverwendbare Funktionen in vue Komponenten zu verteilen. Ein mixin -Objekt kann beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein mixin -Objekt verwendet, werden alle Optionen mixin -Objekts in die eigenen Optionen der Komponente gemischt.

1. Wie verwende ich Mixin?

Einfach ausgedrückt extrahiert mixin Objekt einige allgemeine Optionen von Komponenten, wie etwa Daten in data , Methoden, berechnete Eigenschaften und Lebenszyklus-Hook-Funktionen, und führt sie dann in die Komponente ein, wo sie mit den Optionen der Komponente selbst zusammengeführt werden können.

Beispiel 1:

<Skript>

const meinMixin = {

 Daten(){

  zurückkehren {

   Zahl: 520

  }

 },

 montiert(){

  console.log('Mixin gemountet');

 }

}

Standard exportieren {

  mixins:[meinMixin],

}

</Skript>

ist gleichbedeutend mit:

<Skript>

Standard exportieren {

 Daten(){

  zurückkehren {

   Zahl: 520

  }

 },

 montiert(){

  console.log('Mixin gemountet');

 }

}

</Skript>

Der Vorteil hierbei besteht darin, dass Sie die gemeinsamen Optionen mehrerer Komponenten in ein Mixin-Objekt extrahieren können, das bei Bedarf direkt eingeführt werden kann.

2. Hinweise zur Verwendung von Mixin

Die im mixin enthaltenen Optionen können auch in der Komponente enthalten sein. Was passiert, wenn einige Eigenschaften der im mixin enthaltenen Optionen gleich sind? Was ist zu tun, wenn eine Methode mit demselben Namen sowohl im mixin als auch in der Komponente vorhanden ist? Oder wenn beide Lifecycle-Hook-Funktionen enthalten, welche wird zuerst und welche später ausgeführt? Schauen wir uns als nächstes die Punkte an, auf die wir bei der Verwendung von Mixin achten sollten.

2.1. Was soll ich bei Verwendung eines Mixin-Objekts tun, wenn die Komponente und das Mixin dieselben Optionen enthalten?

Beispiel 2 : Sowohl das mixin -Objekt als auch die Instanz enthalten die data mit zwei verschiedenen Variablen darin

<Vorlage>

 <div>

  {{qdr}} - {{name}} 

 </div>

</Vorlage>

<Skript>

const meinMixin = {

 Daten(){

  zurückkehren {

   Name: „Eine kleine Schwester, die Front-End liebt“

  }

 }

}

Standard exportieren {

 mixins:[meinMixin],

 Daten(){

  zurückkehren {

   qdr: „Front-End-Person“

  }

 }

}

</Skript>

Nach dem Ausführen stellen wir fest, dass beide Variablen verwendet werden können und data im mixin -Objekt mit der data in der Instanz zusammengeführt werden. Dasselbe gilt für methods und computed .

Was passiert, wenn wir die beiden Variablen im vorherigen Beispiel so ändern, dass sie denselben Namen haben?

2.2. Was soll ich tun, wenn die verwendeten Mixin-Objektoptionen und die Optionen in der Instanz dieselben Attribute haben?

Beispiel 3 : Der gleiche name existiert in data

<Vorlage>

 <div>

  {{Name}} 

 </div>

</Vorlage>

<Skript>

const meinMixin = {

 Daten(){

  zurückkehren {

   Name: „Eine kleine Schwester, die Front-End liebt“

  }

 }

}

Standard exportieren {

 mixins:[meinMixin],

 Daten(){

  zurückkehren {

   Name: „Frontend-Person“

  }

 }

}

</Skript>

Laufendes Ergebnis: Der Namenswert ist „Front-End-Person“.

Wenn die Attributwerte gleich sind, wird das Näherungsprinzip gewählt und der Wert in der Instanz wird zuerst vererbt, sodass die Attribute mixin Objekts durch die Attribute in der Instanz überschrieben werden.

2.3. Mixin-Objekte können auch Lebenszyklus-Hook-Funktionen hinzufügen

Was wird zuerst ausgeführt, Mixin oder Instanz?

Beispiel 4 : Hinzufügen von Lebenszyklus-Hook-Funktionen mixin am Beispiel von „ mounted

const meinMixin = {

 montiert(){

  console.log('Mixin gemountet');

 }

}

Standard exportieren {

 mixins:[meinMixin],

 montiert(){

  Konsole.log('gemountet');

 }

}

Laufergebnisse:

Wir haben festgestellt, dass Lebenszyklusfunktionen zusammen ausgeführt werden, wobei zuerst die im mixin und dann die in der Instanz ausgeführt werden.

3. Benutzerdefinierte Attribute einmischen

$options wird verwendet, um die Optionen für die aktuelle Komponenteninstanz zu initialisieren. Dies ist nützlich, wenn Sie eine benutzerdefinierte property in die Optionen aufnehmen müssen.

Kurz gesagt wird $options verwendet, um benutzerdefinierte mixin -Eigenschaften in der Instanz aufzurufen.

Beispiel 5 : Hinzufügen benutzerdefinierter Attribute

const meinMixin = {

  benutzerdefiniert: „Benutzerdefinierte Attribute“

 }

Verwendung in Beispielen:



montiert(){

 Konsole.log(diese.$options.custom);

}

Wenn die Instanz auch eine benutzerdefinierte Eigenschaft mit demselben Namen enthält, wie wird die Priorität behandelt? Was ist, wenn wir die Priorität steuern möchten?

4. Fusionsstrategie

optionMergeStrategies - Option-Merge-Strategie: Verwenden Sie optionMergeStrategies , um die Merge-Regeln zu definieren, wenn mixin -Attribute mit den Attributen in der Instanz in Konflikt stehen, d. h., welches zuerst verwendet werden soll.

Nutzungsregeln:

app.config.optionMergeStrategies.propertyName=(mixinVal,appVal)=>{

  return appVal || mixinVal // Bestimmen Sie, welcher Attributwert zuerst zurückgegeben wird}

Fügen Sie der Instanz gemäß Beispiel 5 oben custom Attribute hinzu und führen Sie sie aus, um die Ergebnisse anzuzeigen.

Beispiel 6 : Validieren von mixin und Priorität von Instanzattributen

<Skript>

const meinMixin = {

  benutzerdefiniert: 'Mixin benutzerdefiniert',

}

Standard exportieren {

  benutzerdefiniert: "App benutzerdefiniert",

  mixins:[meinMixin],

  montiert(){

    console.log(this.$options.custom); // Ergebnis drucken: App benutzerdefiniert

  }

}

</Skript>

Es wird festgestellt, dass die Attributwerte im mixin -Objekt durch die Attributwerte in der Instanz überschrieben werden. Wir können das oben erwähnte optionMergeStrategies -Attribut verwenden, um die custom Zusammenführungsregeln zu ändern.

In die Datei main.js importieren:

app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{

 MixinVal zurückgeben || AppVal

}

Nach dem erneuten Ausführen stellen wir fest, dass das gedruckte Ergebnis zum Attributwert im Mixin wird:

console.log(this.$options.custom); // Ergebnis drucken: Mixin benutzerdefiniert

5. Globales Konfigurations-Mixin

Wenn das Projekt mehrere Komponenten enthält, die bestimmte Optionen wiederverwenden, können wir mixin -Objekt global verwenden. Eine Instanz kann auch mehrere mixin -Objekte einführen.

Die Syntax lautet wie folgt:

app.mixin([ {}, {}, {} ])

Dies ist das Ende dieses Artikels zur Verwendung von Vue3-Mixin. Weitere verwandte Vue3-Mixin-Inhalte 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!