Einfaches Anwendungsbeispiel für eine rekursive Vue-Komponente

Vorwort

Ich glaube, dass viele Studenten bereits mit Rekursion vertraut sind. Wir verwenden Rekursion häufig, um Probleme in Algorithmen zu lösen. Der Klassiker lautet beispielsweise: Suchen Sie in einem Array voller Zahlen die Kombination, deren Summe der Zielzahl entspricht. Die Idee ist nicht schwer. Durchlaufen Sie das Array, um Werte zu erhalten, und fügen Sie sie rekursiv hinzu, bis die Zielzahlenbedingungen erfüllt sind. Obwohl sich durch Rekursion die meisten Probleme lösen lassen, besteht ihr Nachteil darin, dass leicht Code geschrieben werden kann, der zu einer Endlosschleife und einem Stapelüberlauf führt. Als Nächstes werde ich anhand meiner tatsächlichen Geschäftsszenarien über die Anwendung der Rekursion in Vue-Komponenten sprechen.

Verwendung in Vue

Um eine vollständige Rekursion durchzuführen, sind meiner Meinung nach zwei Punkte am wichtigsten:

1. Bestimmen Sie die Bedingungen für den Eintritt in die Rekursion;
2. Bestimmen Sie die Bedingungen für den Ausstieg aus der Rekursion;
   

Das Wichtigste besteht darin, zu bestimmen, wann aus der Rekursion ausgestiegen werden soll. Die rekursive Komponente ist eigentlich sehr einfach. Es ist nur so, dass Komponente A erneut Komponente A aufruft, wodurch eine Rekursion entsteht. Nehmen wir als Beispiel das folgende Unternehmen, mit dem ich konfrontiert war. Eines Tages erhielt ich die Anforderung, Zielbenutzer aus einer Gruppe von Benutzern basierend auf verschiedenen Labelbedingungen herauszufiltern. Daher gibt es das folgende Entwurfsdiagramm:

Auf den ersten Blick sind Sie vielleicht verwirrt, aber nach genauer Analyse werden Sie feststellen, dass es eigentlich gar nicht so schwierig ist. Viele Schüler werden beim Betrachten des Bildes das Gefühl haben, dass es ein bisschen wie das aussieht, was wir oft als Matrjoschkas bezeichnen, bei denen eine Schicht in der anderen liegt. Für diese Art von Diagramm analysieren wir zunächst, welche die kleinste Einheit ist. Aus der obigen Abbildung lässt sich leicht erkennen, dass diese die kleinste Einheit ist. Die große Struktur in der Abbildung besteht im Wesentlichen aus diesem kleinen Teil. Solange dieser Teil zuerst implementiert wird, ist der Rest nichts anderes als das schichtweise Rendern der Daten durch Rekursion.

Der Rest ist nichts weiter als die Beurteilung der Datenstruktur. Wenn kein Unterbaum vorhanden ist, rendern Sie einfach das Element. Wenn ein Element einen Unterbaum enthält, müssen Sie die Komponente erneut rendern und die untergeordneten Daten darin übergeben. Die Idee ist eigentlich ganz einfach, vorausgesetzt, unsere Datenstruktur sieht folgendermaßen aus:

{
 Typ: 'oder',
 Werteliste: [
  {	
   Bedingung: 'Anzahl der Anmeldungen in den letzten 7 Tagen',
   Anmeldung: '!=',
   Wert: 45
  },
  {	
   Bedingung: 'Anzahl der Anmeldungen in den letzten 7 Tagen',
   Anmeldung: '!=',
   Wert: 45
  },
  {
   Typ: 'und'
   Werteliste: [
   	{
     Bedingung: 'Anzahl der Anmeldungen in den letzten 7 Tagen',
     Anmeldung: '!=',
     Wert: 45
    }
   ]
  }
 ]
}

Die obige Datenstruktur ist sehr klar. Sie können sehen, dass, wenn das Unterelement im Array eine ValueList enthält, dies darauf hinweist, dass die in der obigen Abbildung erwähnte kleine Komponente erneut gerendert werden muss. Daher können wir einfach wie folgt codieren (der folgende Code kann noch optimiert werden):

<Vorlage>
 <div Klasse="Beschriftungsliste">
  <el-tag Typ="primary" Größe="mini" Klasse="Logik">{{ TypDict[treedata.Typ] }}</el-tag>
  <template v-for="(Element, Index) in treedata.valueList">
   <ul v-if="!item.hasOwnProperty('valueList')" :Schlüssel="'rule_' + index">
    <li>{{ Artikelzustand }} {{ Artikellogik }} {{ Artikelwert }}</li>
   </ul>
  </Vorlage>
  <template v-for="(Element, Index) in treedata.valueList">
   <!-- Hier wird festgestellt, dass eine Werteliste vorhanden ist, daher wird die Rendering-Komponente erneut aufgerufen, um die Unterelemente darzustellen-->
   <label-shows-view v-if="item.hasOwnProperty('valueList')" :key="'tree_' + index" :treedata="item"></label-shows-view>
  </Vorlage>
 </div>
</Vorlage>
<Skript>
const _TYPE = {
 'und': 'und',
 'oder': 'oder'
}
Standard exportieren {
 Name: 'LabelShowsView',
 Requisiten: {
  Baumdaten: {
   Typ: Objekt,
   erforderlich: true
  }
 },
 Daten() {
  zurückkehren {
   TypDict: _TYPE
  }
 }
}
</Skript>

Es ist nicht schwer zu erkennen, dass die Hauptsache darin besteht, die wiederholten Teile in der Datenstruktur zu analysieren und zu finden und sie Schicht für Schicht darzustellen. Tatsächlich ist das obige Beispiel für reine Anzeigezwecke relativ einfach zu verstehen. Wenn es jedoch zu einer Dateninteraktion kommt, muss besondere Aufmerksamkeit darauf gerichtet werden. Wenn die rekursive Ebene sehr tief ist, müssen Ereignisübertragung und Datenänderungen sorgfältig behandelt werden. Als ich beispielsweise die obige visuelle Konfiguration zum Filtern von Kundengruppen abgeschlossen habe, stieß ich auf die folgende Abbildung:

Sie können Unterelemente hinzufügen und löschen und außerdem jede Gruppe ziehen, um ihre Position anzupassen. Zu diesem Zeitpunkt können Sie eine Methode ähnlich dem Bubbling verwenden, bei der die untergeordnete Komponente Ereignisse auslöst und auch Ereignisse empfängt. Wenn Sie beispielsweise einen Satz von Bedingungen löschen, müssen Sie der übergeordneten Komponente wie folgt mitteilen, welches untergeordnete Datenelement gelöscht werden soll:

<!-- labelRulesView.vue -->
<!-- Diese benutzerdefinierte Komponente ist die rekursive Komponente dieser Komponente-->
<label-rules-view v-if="item.hasOwnProperty('valueList')" :label-list="labelList" :treedata="item" :current-index="index" @delGroup="funDelGroup"></label-rules-view>
<!-- Diese Komponente überwacht das delGroup-Ereignis -->
 
<el-button size="mini" type="danger" icon="el-icon-delete" class="operate-btn" @click="handleDelNewGroup(currentIndex)"></el-button>

// Eine Gruppe löschen handleDelNewGroup(index) {
 this.$emit('delGroup', index) // Ereignisse für übergeordnete Komponenten auslösen},
funDelGroup(index) {
 dies.treedata.valueList.splice(index, 1)
},

In einer rekursiven Komponente spielt diese Komponente häufig sowohl die Rolle einer untergeordneten als auch einer übergeordneten Komponente. Daher ist es notwendig, die Interaktion zwischen Daten zu kontrollieren, da es sonst leicht zu Datenverwirrung kommen kann.

Zusammenfassung

Dieser Artikel ist eine Aufzeichnung dessen, was der Autor in tatsächlichen Geschäftsszenarien erlebt hat. Mithilfe rekursiver Komponenten können wir sogar einige komplexere grafische Anzeigen erstellen. Ich hoffe, dies kann Ihnen helfen, Ihren Horizont zu erweitern. Wenn es Ihnen hilft, geben Sie mir bitte ein kleines Herz (das nächste Mal werde ich definitiv ablehnen [doge])

Oben sind die Details eines einfachen Anwendungsbeispiels der rekursiven Vue-Komponente. Weitere Informationen zur rekursiven Vue-Komponente finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!