Detaillierte Erklärung zur Verwendung von this.$set in Vue

Verwendung von this.$set in Vue

Hintergrund : Als ich ein Front-End-Projekt schrieb, gab uns das Back-End ein JSON-Objekt und ich renderte es auf der Seite. Aus eigenen Gründen möchte ich dem zurückgegebenen Objekt jedoch ein Feld hinzufügen, also füge ich ein Feld hinein. Das Feld wird hinzugefügt, aber die Seitendarstellung ändert sich nicht. Später wurde mir klar, dass es nicht reagierte. Wenn dieses neue Feld reagieren soll, müssen wir this.$set verwenden, um Daten einzufügen.

Wenn in den Daten von Vue ein Objekt oder Array (der Wert im Array ist ein Objekt) deklariert oder zugewiesen wird, führt das Hinzufügen einer neuen Eigenschaft zum Objekt und das Aktualisieren des Werts dieser Eigenschaft nicht zu einer Aktualisierung der Ansicht.

verwenden

this.$set( target, key, value）

target : stellt die Datenquelle dar, also das Array oder Objekt, mit dem Sie arbeiten möchten

key : das zu bedienende Feld

value : die zu ändernden Daten

Hier ein kleines Beispiel:

Fügen Sie einem Objekt eine Alterseigenschaft hinzu und sorgen Sie dafür, dass sie sich reaktionsschnell ändert

<Vorlage>
  <div Klasse="Text">
      <p>{{Liste}}</p>
      <button @click="add">Alter++</button>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            Liste: {Name: "Zhang San"}
        }
    },
    Methoden: {
        hinzufügen(){
            if(!this.list.age){ // Wenn kein Altersattribut vorhanden ist, fügen Sie ein Altersattribut hinzu this.list.age=18
            }anders{
                diese.Liste.Alter++
            }
            konsole.log(diese.liste)
        }
    }
}
</Skript>

Wenn wir this.$set nicht zum Hinzufügen von Objekteigenschaften verwenden, ist der Effekt:

Die Daten werden zwar hinzugefügt, aber die Seite rendert die Alterseigenschaft nicht entsprechend.

Wenn wir this.$set(this.list,'age',18) verwenden, um ein Attribut hinzuzufügen. Wirkung:

Wir können sehen, dass die hinzugefügten Daten reagieren.

Warum responsiv?

Wenn Sie genau hinsehen, können Sie erkennen, dass this.$set über zusätzliche Methoden zum Abrufen und Festlegen des Alters verfügt, weshalb es reaktionsfähig ist.

analysieren

Das responsive Prinzip von Vue besteht darin, dass ein JavaScript-Objekt als Datenoption an eine Vue-Instanz übergeben wird. Vue durchläuft alle Eigenschaften dieses Objekts und verwendet Object.defineProperty, um alle diese Eigenschaften in Getter/Setter umzuwandeln. Diese Getter/Setter sind für den Benutzer unsichtbar, aber intern ermöglichen sie es Vue, Abhängigkeiten zu verfolgen und Änderungen zu melden, wenn auf Eigenschaften zugegriffen und diese geändert werden. Dabei ist zu beachten, dass verschiedene Browser Getter/Setter beim Drucken von Datenobjekten in der Konsole unterschiedlich formatieren. Die folgende Abbildung stammt aus der offiziellen Dokumentation.

Zusammenfassen

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