Detaillierte Erläuterung gängiger Methoden der Vue-Entwicklung

$nächsterTick()

this.$nextTick() verzögert den Rückruf bis nach dem nächsten DOM-Aktualisierungszyklus. Verwenden Sie es sofort nach der Änderung der Daten und warten Sie dann, bis das DOM aktualisiert ist.

Anwendungsszenarien: In einigen Fällen funktioniert die Verwendung des Variablenwerts nicht, wenn eine Variable zunächst zugewiesen oder aktualisiert wird, das DOM jedoch nicht aktualisiert wurde. An diesem Punkt müssen Sie this.$nextTick() verwenden, um auf das Laden des DOM-Updates zu warten und es dann sofort zu verwenden. Wird häufig in erstellten Hook-Funktionen und Situationen verwendet, die DOM-Updates beinhalten.
Verwendung

dies.$nextTick(() => { dies.$refs.table.refresh(true)})

this.$nextTick() bietet große Vorteile bei der Seiteninteraktion, insbesondere bei Vorgängen nach der Neugenerierung von DOM-Objekten nach dem Abrufen von Daten aus dem Hintergrund

$forceUpdate()

Erzwingt ein erneutes Rendern der Vue-Instanz. Beachten Sie, dass dies nur die Instanz selbst und die in den Slot-Inhalt eingefügten untergeordneten Komponenten betrifft, nicht alle untergeordneten Komponenten.

Anwendungsszenarien

Bei komplexen Objekten wie Arrays von Objekten können Sie einem Element im Array direkt Attribute hinzufügen oder die Länge des Arrays direkt auf 0 ändern. Vue kann nicht wissen, dass eine Änderung stattgefunden hat, daher können Sie erzwungene Aktualisierungen verwenden.

Andererseits wird beim Rendern des Formulars manchmal eine Auswahloperation ausgeführt, aber der Formularinhalt wird nicht aktualisiert. Sie können die erzwungene Aktualisierung verwenden

Verwendung

dies.$nextTick(() => {
  dies.$refs.table.refresh(true)
})

$setzen()

Anwendungsszenarien

Aufgrund der Einschränkungen von ES5 kann Vue.js das Hinzufügen oder Entfernen von Objekteigenschaften nicht erkennen.

Fügen Sie einem responsiven Objekt eine Eigenschaft hinzu und stellen Sie sicher, dass die neue Eigenschaft auch responsive ist und eine Ansichtsaktualisierung auslöst. Es muss verwendet werden, um responsiven Objekten neue Eigenschaften hinzuzufügen, da Vue normale neue Eigenschaften (wie this.myObject.newProperty = 'hi') nicht erkennen kann.

Beachten Sie, dass das Objekt keine Vue-Instanz oder das Stammdatenobjekt einer Vue-Instanz sein kann.

Verwendung

this.$set( Ziel, Eigenschaftsname/Index, Wert )

• target : die zu ändernde Datenquelle (kann ein Objekt oder ein Array sein)
• propertyName/index : der Name der neu hinzugefügten Eigenschaft des Objekts oder die Indexposition des neu hinzugefügten Elements des Arrays
• value : der Wert des neu hinzugefügten Attributs

// Objekt this.$set(this.student,"age", 24)
// Array dieses.$set(this.arrayList, 2, { name: "Dieses Array" })

.sync – Neu in 2.3.0+ (in Vue 3.x durch v-model ersetzt, wird nicht mehr unterstützt)

Anwendungsszenarien

In manchen Fällen müssen wir möglicherweise eine „bidirektionale Bindung“ an einer Requisite durchführen. Ab Vue 2.3.0 können wir hierfür den Modifikator .sync verwenden. Wird nach Vue 3.0 nicht mehr unterstützt

Verwendung

Übergeordnete Komponente

<comp :foo.sync="bar"></comp>

Tatsächlich wird es entsprechend erweitert auf

<comp:foo="bar" @update:foo="val => bar = val"></comp>

Unterkomponenten

dies.$emit('update:foo', neuerWert)

Zusammenfassen

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