Verwendung der VUE-Renderfunktion und ausführliche Erklärung

Vorwort

Bei der normalen Programmierung wird HTML meistens mithilfe von Vorlagen erstellt. In einigen Sonderfällen kann die Vorlagenmethode die Anforderungen jedoch nicht gut erfüllen. Zu diesem Zeitpunkt sind für den Betrieb JavaScript-Programmierkenntnisse erforderlich. An diesem Punkt kann die Renderfunktion ihre Stärken unter Beweis stellen.

Die Rolle des Renders

Beispieleintrag für die offizielle Website

In diesem Beispiel auf der offiziellen Website werden Komponenten verwendet, um denselben Inhalt über Solt in die Tags h1-h6 einzufügen. Bei der herkömmlichen Methode ist der Code nicht nur lang, sondern <slot></slot> wird auch auf jeder Ebene des Titels wiederholt geschrieben und muss erneut wiederholt werden, wenn das Ankerelement eingefügt werden soll. Nach Verwendung der Renderfunktion ist der Code viel einfacher.

Vue.component('ankerte Überschrift', {
  rendern: Funktion (ErstelleElement) {
    returniere Element erstellen(
      „h“ + this.level, // Tag-Name this.$slots.default // untergeordnetes Knoten-Array)
  },
  Requisiten: {
    Ebene:
      Typ: Nummer,
      erforderlich: true
    }
  }
})

Die Rolle der Renderfunktion besteht darin, den Code erheblich zu vereinfachen, wenn der durch die Vorlage in der Szene implementierte Code langwierig, umständlich und voller Wiederholungen ist.

Erläuterung der Renderfunktion

Bei Verwendung der Renderfunktion wird ein Parameter createElement verwendet. Dieser createElement-Parameter ist im Wesentlichen auch eine Funktion, also das Tool zum Erstellen des virtuellen DOM in Vue. Werfen wir einen Blick auf createElement.

In der Methode createelement gibt es drei Parameter:

returniere createEement(, {}, [])

1. Der erste Parameter (erforderlicher Parameter): wird hauptsächlich verwendet, um HTML-Inhalte im DOM bereitzustellen. Der Typ kann Zeichenfolge, Objekt oder Funktion sein.

2. Der zweite Parameter (Objekttyp, optional): wird verwendet, um einige Stile, Attribute, Parameter der übergebenen Komponenten, Bindungsereignisse usw. in diesem DOM festzulegen.

3. Der dritte Parameter (Typ ist Array, Array-Elementtyp ist VNode, optional): wird hauptsächlich zum Festlegen des Verteilungsinhalts verwendet, z. B. anderer neu hinzugefügter Komponenten.

Hinweis: Alle Vnodes im Komponentenbaum müssen eindeutig sein

Durch Übergeben des Parameters „createElement“ wird ein virtueller Knoten erstellt und anschließend zum Rendern zurückgegeben.

Im Allgemeinen besteht die Essenz der Renderfunktion darin, einen virtuellen Knoten zu erstellen.

Der Unterschied zwischen Render und Template

Ähnlichkeiten:

Die render erstellt wie template eine HTML-Vorlage

Unterschiede:

• Template eignet sich für einfache Logik und das Rendern eignet sich für komplexe Logik.
• template ist für Benutzer relativ einfach zu verstehen, es mangelt ihnen jedoch an Flexibilität; die benutzerdefinierte Renderfunktion ist sehr flexibel, stellt jedoch höhere Anforderungen an die Benutzer.
• Die render ist höher und die Vorlagenleistung ist niedriger.
• Beim Rendern mit der Renderfunktion gibt es keinen Kompilierungsprozess, was gleichbedeutend damit ist, dass der Benutzer den Code direkt an das Programm übergibt. Daher stellt die Nutzung hohe Anforderungen an den Benutzer und ist fehleranfällig.
• Die Priorität Render ist höher als die der Vorlage, beachten Sie jedoch, dass die Mustache-Syntax (doppelte geschweifte Klammern) nicht erneut verwendet werden kann.

Hinweis: Vorlage und Render können nicht zusammen verwendet werden, sonst sind sie ungültig

Rendering-Beispiel

Wenn Sie beispielsweise einen Satz allgemeiner Schaltflächenkomponenten auf einmal kapseln, verfügen die Schaltflächen über vier Stile (Erfolg, Fehler, Warnung und Standard).

Die Vorlagenmethode lautet wie folgt:

 <div Klasse="btn btn-Erfolg" v-if="Typ === 'Erfolg'">{{ Text }}</div>
 <div class="btn btn-danger" v-else-if="Typ === 'danger'">{{ text }}</div>
 <div class="btn btn-warning" v-else-if="Typ === 'warning'">{{ Text }}</div>

Dies ist in Ordnung, wenn nur wenige Schaltflächen vorhanden sind. Sobald jedoch die Anzahl der Schaltflächen zunimmt, wird es sehr langwierig. Zu diesem Zeitpunkt ist eine Renderfunktion erforderlich.

Generieren Sie Button-DOM entsprechend der Situation

Bevor Sie die Renderfunktion verwenden, müssen Sie das Vorlagentag entfernen und nur die Logikebene behalten.

Die Klasse wird dynamisch über den übergebenen Typ ausgefüllt und der Inhalt über inderText zum DOM hinzugefügt.

rendern(h) {
  return h('div', {
   Klasse: {
    btn: wahr,
    'btn-erfolg': dieser.Typ === 'Erfolg',
    'btn-danger': dieser.Typ === 'danger',
    „btn-Warnung“: dieser.Typ === „Warnung“
   },
   domProps: {
    innererText: dieser.text
   },
   An: {
    Klicken Sie auf: this.handleClick
   }
  });
 },

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!