Detaillierte Erklärung der API in Vue.js, die leicht zu übersehen ist

nächstesTick

nextTick ist eine von Vue.js bereitgestellte Funktion, die nicht im Browser integriert ist. Die Funktion nextTick empfängt eine Rückruffunktion cb, die nach dem nächsten DOM-Aktualisierungszyklus ausgeführt wird. Beispielsweise das folgende Beispiel:

<Vorlage>
  <div>
    <p v-if="show" ref="node">Inhalt</p>
    <button @click="handleShow">Anzeigen</button>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Daten () {
      zurückkehren {
        anzeigen:false
      }
    },
    Methoden: {
      handleShow() {
        dies.show = wahr;
        console.log(this.$refs.node); // undefiniert
        dies.$nextTick(() => {
          console.log(this.$refs.node); // <p>Inhalt</p>
        });
      }
    }
  }
</Skript>

Wenn „show“ auf „true“ gesetzt ist, wurde der Knoten p noch nicht gerendert, sodass „undefined“ gedruckt wird. Im Rückruf „nextTick“ wurde „p“ gerendert, sodass der Knoten korrekt gedruckt werden kann.

Der Quellcode von nextTick befindet sich unter github.com/vuejs/vue/b…. Wie Sie sehen, verwendet Vue.js drei Methoden: Promise, setTimeout und setImmediate, um nextTick zu implementieren. In unterschiedlichen Umgebungen werden unterschiedliche Methoden verwendet.

Syntaxvereinfachung für V-Modell

Das V-Modell wird häufig für die bidirektionale Bindung von Daten an Formularelemente wie <input> verwendet. Zusätzlich zu nativen Elementen kann es auch in benutzerdefinierten Komponenten verwendet werden.

v-model ist eine einfache Syntax, die in „Props: Wert“ und „Ereignisse: Eingabe“ zerlegt werden kann. Das heißt, die Komponente muss eine Eigenschaft namens „value“ und ein benutzerdefiniertes Ereignis namens „input“ bereitstellen. Wenn diese beiden Bedingungen erfüllt sind, kann der Benutzer v-model auf der benutzerdefinierten Komponente verwenden. Das folgende Beispiel implementiert etwa einen Zahlenselektor:

<Vorlage>
  <div>
    <button @click="increase(-1)">Verringern 1</button>
    <span style="color: red;padding: 6px">{{ aktuellerWert }}</span>
    <button @click="increase(1)">Erhöhen 1</button>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Name: 'Eingabenummer',
    Requisiten: {
      Wert: {
        Typ: Nummer
      }
    },
    Daten () {
      zurückkehren {
        aktuellerWert: dieser.Wert
      }
    },
    betrachten:
      Wert (val) {
        dieser.aktuellerWert = Wert;
      }
    },
    Methoden: {
      erhöhen(Wert) {
        dieser.aktuellerWert += Wert;
        dies.$emit('Eingabe', dies.aktuellerWert);
      }
    }
  }
</Skript>

Props können im Allgemeinen nicht innerhalb einer Komponente geändert werden, sondern nur über deren übergeordnete Komponente. Daher verfügt die Implementierung des V-Modells im Allgemeinen über interne Daten namens currentValue, die zunächst einen Wert von value erhalten. Wenn value geändert wird, wird es in Echtzeit über watch aktualisiert. Die Komponente ändert nicht den Wert von value, sondern ändert currentValue. Sie sendet den geänderten Wert auch über einen benutzerdefinierten Ereigniseingang an die übergeordnete Komponente. Nach Erhalt des Werts ändert die übergeordnete Komponente value. Daher kann die obige Nummernauswahlkomponente auf die folgenden zwei Arten verwendet werden:

<Vorlage>
  <Eingabenummer v-Modell="Wert" />
</Vorlage>
<Skript>
  importiere InputNumber aus „../components/input-number/input-number.vue“;

  Standard exportieren {
    Komponenten: { InputNumber },
    Daten () {
      zurückkehren {
        Wert: 1
      }
    }
  }
</Skript>

oder:

<Vorlage>
  <InputNumber :Wert="Wert" @input="HandleChange" />
</Vorlage>
<Skript>
  importiere InputNumber aus „../components/input-number/input-number.vue“;

  Standard exportieren {
    Komponenten: { InputNumber },
    Daten () {
      zurückkehren {
        Wert: 1
      }
    },
    Methoden: {
      handleChange (Wert) {
        dieser.Wert = Wert;
      }
    }
  }
</Skript>

Wenn Sie die Namen „value“ und „input“ nicht verwenden möchten, steht ab Vue.js 2.2.0 eine Modelloption zum Angeben ihrer Namen zur Verfügung. Die Nummernauswahlkomponente kann daher auch folgendermaßen geschrieben werden:

<Vorlage>
  <div>
    <button @click="increase(-1)">Verringern 1</button>
    <span style="color: red;padding: 6px">{{ aktuellerWert }}</span>
    <button @click="increase(1)">Erhöhen 1</button>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Name: 'Eingabenummer',
    Requisiten: {
      Nummer: {
        Typ: Nummer
      }
    },
    Modell: {
      Requisite: "Zahl",
      Ereignis: „Ändern“
    },
    Daten () {
      zurückkehren {
        aktuellerWert: diese.Nummer
      }
    },
    betrachten:
      Wert (val) {
        dieser.aktuellerWert = Wert;
      }
    },
    Methoden: {
      erhöhen(Wert) {
        dieser.aktuellerWert += Wert;
        dies.$emit('Zahl', dies.aktuellerWert);
      }
    }
  }
</Skript>

In der Modelloption können Sie anstelle von Wert und Eingabe die Namen von Prop und Event angeben, da diese beiden Namen in einigen nativen Formularelementen andere Verwendungszwecke haben.

.sync-Modifikator

Wenn Sie Vue.js 1.x verwendet haben, müssen Sie mit .sync vertraut sein. In 1.x können Sie .sync verwenden, um Daten bidirektional zu binden, was bedeutet, dass sowohl die übergeordnete als auch die untergeordnete Komponente die Daten ändern können und bidirektional reagiert. Diese Verwendung ist in Vue.js 2.x veraltet. Der Zweck besteht darin, übergeordnete und untergeordnete Komponenten so weit wie möglich zu entkoppeln, um zu verhindern, dass untergeordnete Komponenten versehentlich den Status übergeordneter Komponenten ändern.

Allerdings wurde in Vue.js Version 2.3.0 der Modifikator .sync hinzugefügt, seine Verwendung ist aber nicht genau dieselbe wie in 1.x. .sync von 2.x ist keine echte bidirektionale Bindung, sondern eine Art Syntaxvereinfachung. Datenänderungen werden weiterhin in der übergeordneten Komponente und nicht in der untergeordneten Komponente vorgenommen.

Wir verwenden immer noch das Beispiel mit dem Nummernselektor, dieses Mal jedoch .sync statt v-model und können es folgendermaßen umschreiben:

<Vorlage>
  <div>
    <button @click="increase(-1)">Verringern 1</button>
    <span style="color: red;padding: 6px">{{ Wert }}</span>
    <button @click="increase(1)">Erhöhen 1</button>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Name: 'Eingabenummer',
    Requisiten: {
      Wert: {
        Typ: Nummer
      }
    },
    Methoden: {
      erhöhen(Wert) {
        dies.$emit('update:value', dies.value + val);
      }
    }
  }
</Skript>

Anwendungsfälle:

<Vorlage>
  <Eingabenummer :Wert.sync="Wert" />
</Vorlage>
<Skript>
  importiere InputNumber aus „../components/input-number/input-number.vue“;

  Standard exportieren {
    Komponenten: { InputNumber },
    Daten () {
      zurückkehren {
        Wert: 1
      }
    }
  }
</Skript>

Es scheint viel einfacher zu sein als die Implementierung des V-Modells, aber der Effekt ist derselbe. In einer Komponente kann es nur ein V-Modell geben, es können jedoch mehrere .sync-Dateien festgelegt werden. Obwohl .sync gut ist, weist es auch Einschränkungen auf, beispielsweise:

• Kann nicht mit Ausdrücken verwendet werden (z. B. ist v-bind:title.sync="doc.title + '!'" ungültig);
• Es kann nicht auf wörtliche Objekte angewendet werden (z. B. funktioniert v-bind.sync="{ title: doc.title }" nicht richtig).

$festgelegt

$set wurde im vorherigen Abschnitt eingeführt. Es wird in zwei Situationen verwendet:

Aufgrund von Einschränkungen in JavaScript kann Vue die folgenden Array-Änderungen nicht erkennen:

• Wenn Sie ein Element direkt über seinen Index festlegen, zum Beispiel: this.items[index] = value;
• Beim Ändern der Länge eines Arrays, zum Beispiel: vm.items.length = newLength.

Aufgrund von Einschränkungen in JavaScript kann Vue das Hinzufügen oder Entfernen von Objekteigenschaften nicht erkennen.

Zum Beispiel,

// Array-Export Standard {
  Daten () {
    zurückkehren {
      Elemente: ['a', 'b', 'c']
    }
  },
  Methoden: {
    handler () {
      this.items[1] = 'x'; // reagiert nicht }
  }
}

Verwenden von $set:

// Array-Export Standard {
  Daten () {
    zurückkehren {
      Elemente: ['a', 'b', 'c']
    }
  },
  Methoden: {
    handler () {
      this.$set(this.items, 1, 'x'); // ist responsive }
  }
}

Nehmen wir Objekte als Beispiel:

// Objektexportstandard {
  Daten () {
    zurückkehren {
      Artikel:
        ein: 1
      }
    }
  },
  Methoden: {
    handler () {
      this.item.b = 2; // reagiert nicht }
  }
}

Verwenden von $set:

// Objekt exportieren Standard {
  Daten () {
    zurückkehren {
      Artikel:
        ein: 1
      }
    }
  },
  Methoden: {
    handler () {
      this.$set(this.item, 'b', 2); // ist reaktionsfähig }
  }
}

Darüber hinaus können die folgenden Array-Methoden Ansichtsaktualisierungen auslösen, die reaktionsfähig sind:

drücken(), pop(), verschieben(), verschieben aufheben(), spleißen(), sortieren(), umkehren().

Ein anderer Trick besteht darin, zuerst ein Array zu kopieren, es dann nach Index zu ändern und anschließend das gesamte ursprüngliche Array zu ersetzen, zum Beispiel:

handler () {
  const Daten = [...diese.Elemente];
  Daten[1] = "x";
  this.items = Daten;
}

Berechneter Eigenschaftensatz

Berechnete Eigenschaften sind einfach und werden häufig verwendet, aber meistens nutzen wir einfach die Standard-Get-Methode, also die übliche herkömmliche Schreibmethode, um Daten, die von anderen Zuständen abhängen, durch Berechnung abzurufen. Zum Beispiel:

berechnet: {
  vollständiger Name () {
    gibt `${this.firstName} ${this.lastName}` zurück;
  }
}

Der vollständige Name kann hier tatsächlich als Objekt statt als Funktion geschrieben werden. In der Funktionsform verwenden wir jedoch standardmäßig die Get-Methode. Wenn er als Objekt geschrieben wird, können wir auch die Set-Methode verwenden:

berechnet: {
  vollständiger Name:
    erhalten () {
      gibt `${this.firstName} ${this.lastName}` zurück;
    },
    setze (Wert) {
      Konstantennamen = val.split(' ');
      dieser.Vorname = Namen[0];
      this.lastName = Namen[Namen.Länge - 1];
    }
  }
}

Berechnete Eigenschaften werden meist nur zum Lesen verwendet. Nach der Verwendung von set können sie geschrieben werden. Wenn im obigen Beispiel beispielsweise this.fullName = 'Aresn Liang' ausgeführt wird, wird das berechnete Set aufgerufen und firstName und lastName werden Aresn und Liang zugewiesen.

Zusammenfassen

Damit ist dieser Artikel über die leicht zu übersehenden APIs in Vue.js abgeschlossen. Weitere Informationen zu den leicht zu übersehenden APIs in Vue.js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!