Tiefgreifendes Verständnis der Datenreaktionsfähigkeit von Vue

1. ES-Syntax-Getter und -Setter

Bevor Sie beginnen, das Datenreaktivitätsprinzip von Vue zu verstehen, sollten Sie zunächst die spezifische Verwendung von Getter- und Setter-Methoden in der ES-Syntax verstehen.

Getter- und Setter-Methoden sind eine Möglichkeit, einem Objekt mit den Schlüsselwörtern „get“ und „set“ virtuelle Eigenschaften hinzuzufügen. Diese Eigenschaft existiert tatsächlich nicht, sondern wird durch eine Getter-Funktion und eine Setter-Funktion simuliert. Der Zweck besteht darin, eine Speicherfunktion und eine Wertabruffunktion für ein bestimmtes Attribut festzulegen, das Zugriffsverhalten des Attributs abzufangen und einige Einschränkungen für den Zugriff auf das Attribut festzulegen. Wie unten gezeigt (der folgende Code stammt von mdn)

Getter-Methoden

const obj = {
  Protokoll: ['a', 'b', 'c'],
  get latest() { //Füge das Schlüsselwort get vor der normalen Methode hinzu if (this.log.length == 0) {
      Rückgabe undefiniert;
    }
    gib dieses.log zurück[diese.log.Länge - 1];
  }
}

console.log(obj.latest); // Ausgabe c, hole den Eigenschaftsnamen ohne Klammern

Setter-Methoden

const Sprache = {
  setze aktuellen(Namen) {
    dies.log.push(Name);
  },
  Protokoll: []
}

Sprache.aktuell = "EN";
Sprache.aktuell = "FA";

console.log(language.log); // Ausgabe-Array ["EN", "FA"]

2. defineProperty in ES-Syntax

Die Methode „defineProperty“ definiert eine neue Eigenschaft direkt für ein Objekt oder ändert eine vorhandene Eigenschaft eines Objekts und gibt dieses Objekt zurück, das verwendet werden kann, um einem Objekt nach der Definition Eigenschaften zu ändern oder hinzuzufügen.
Die Syntax lautet:

Object.defineProperty(Objekt, Eigenschaft, Deskriptor)

Fügen Sie allgemeine Eigenschaften hinzu:

lass Daten = {
  m: 0
}

Objekt.defineProperty(Daten, 'n', {
  Wert: 1 //Der Wert des hinzugefügten Attributs ist sein Wert})
console.log(`${data.n}`) // gibt den n-Wert als 1 aus

Kann auch verwendet werden, um Getter und Setter für virtuelle Eigenschaften hinzuzufügen

lass data1 = {
    _n: 0
}

Objekt.defineProperty(data1, 'n', {
  erhalten(){
    gib dies zurück._n
  }, 
  setze(Wert){
    wenn(Wert < 0) return
    this._n = Wert
  }//Schreiben Sie einfach get / set }) // Da das virtuelle Attribut als n angegeben ist, d. h. get n(){}, setze n(value){}, muss n nicht in die Funktionsdefinition geschrieben werden

3. Vues Proxy und Überwachung der Daten

Agent, also Stellvertreter, vereinfacht gesagt, erledige ich einige meiner eigenen Dinge nicht selbst, sondern gebe sie jemand anderem, der das für mich erledigt. Die Person, die die Arbeit erledigt, ist der Agent. In dieser Logik gibt es zwei wichtige Punkte, die geklärt werden müssen. Der Agent ist die Person, die die Vorgänge durchführt, aber die Dinge, die er durchführt, gehören nicht ihm, sondern der Person, die ihn mit der Rolle des Agenten betraut.

Daher ist in Analogie zum Vue-Datenproxy der Proxy das data{}-Datenobjekt und der Proxy die Vue-Instanz-VM. Das data{}-Datenobjekt möchte, dass die Proxy-VM die Datenoperationen im data{}-Datenobjekt verwaltet. Daher ist das Datenobjekt data{} nur für die Produktion interner Daten verantwortlich und die Verwaltung und der Betrieb der produzierten Daten werden vollständig von der VM übernommen.

Wie steuert und verarbeitet VM also die Daten im Datenobjekt data{}? Mit anderen Worten: Wie erkennt vm rechtzeitig, wenn sich ein Attributwert im Datenobjekt data{} ändert?

Daher werden die Getter- und Setter-Methoden in der ES-Syntax verwendet. Jede Operation an den von den Getter- und Setter-Methoden gesteuerten Eigenschaften wird von diesen beiden Funktionen erkannt. Die von den Getter- und Setter-Methoden gebildeten Eigenschaften sind virtuelle Eigenschaften und existieren nicht wirklich. Wenn der Benutzer daher die Eigenschaften des Datenobjekts data{} direkt ändern möchte, ohne über die Proxy-VM zu gehen, können die entsprechenden Entitätseigenschaften nicht abgerufen und nur über die Getter- und Setter-Methoden geändert werden, und die Änderung wird definitiv von der VM erkannt.

Um die vollständige Kontrolle über die Daten im Datenobjekt data{} zu erlangen, muss vm daher beim Erstellen der Vue-Instanz einige Verarbeitungen an dem übergebenen Datenobjekt data{} durchführen. Die Verarbeitung besteht darin, die Attribute im Datenobjekt data{} in virtuelle Attribute umzuwandeln, die durch Getter- und Setter-Methoden gesteuert werden, sie im Proxy-Datenobjekt obj zu speichern und zurückzugeben.

Um jedoch zu verhindern, dass Benutzer die ursprünglichen data{}-Attribute direkt ändern, werden auch die Entitätsattribute des ursprünglichen data{}-Objekts geändert. Die Namen der hinzugefügten virtuellen Attribute sind dieselben wie die Entitätsattributnamen, sodass die ursprünglichen tatsächlichen Attribute durch die virtuellen Attribute überschrieben werden. Wenn Benutzer die Attributwerte ändern, ändern sie die virtuellen Attribute über die Getter- und Setter-Methoden. Auf diese Weise werden alle Änderungen an allen Eigenschaften des data{}-Datenobjekts von der Vue-Instanz-VM erkannt.

lass meineDaten = {n:0}
let data = proxy({ data:myData }) // Ähnlich wie let vm = new Vue({data: myData})

Funktion Proxy ({Daten} / * Dekonstruktionszuweisung * /) {
  lass _n = Daten.n
  Object.defineProperty(data, 'n', { //Überschreibe die ursprüngliche data.n-Eigenschaft get(){
      Rückgabewert _n
    },
    setze(neuerWert){
      wenn(neuerWert<0)return
      _n = neuerWert
    }
  })// Ändere die eigenen Attribute des data{}-Datenobjekts. Der Abschluss kann verwendet werden, um einen Kontext zu bilden, sodass der ursprüngliche tatsächliche Attributwert im Kontext des Abschlusses vorhanden ist_n const obj = {}
  Objekt.defineProperty(obj, 'n', {
    erhalten(){
      Daten zurückgeben.n
    },
    setze(Wert){
      data.n = Wert
    }
  }) //Füge einen Proxy für das Datenobjekt data{} hinzu und bediene dich des Datenobjekts data{}. return obj // obj ist der Proxy für data{}}

4. Vues Datenreaktionsfähigkeit

Die sogenannte Reaktionsfähigkeit bedeutet, dass auf Veränderungen entsprechend reagiert wird.

Die Daten in Vue reagieren. Vue verwendet die Funktion Object.defineProperty(), um die Daten mithilfe von Getter- und Setter-Methoden zu proxyen und zu überwachen. Sobald sich die Daten ändern, ändert Vue die den Daten entsprechende UI-Ansicht. Dies ist die Datenreaktionsfähigkeit von Vue.

Vue verwendet jedoch Object.defineProperty, um den Listener festzulegen. Daher kann es den Listener nur für die Eigenschaften festlegen, die beim Instanziieren von Vue bereits im Datenobjekt vorhanden sind. Vue hört nicht auf Eigenschaften, die nicht vorhanden sind oder später hinzugefügt werden.

Um dieses Problem zu lösen, gibt es zwei Ansätze:

1. Alle Eigenschaften im Voraus deklarieren

2. Verwenden Sie Vue.set und this.$set, um Eigenschaften hinzuzufügen

Wenn Sie Vue.set und this.$set zum Hinzufügen von Eigenschaften verwenden, wird Vue angewiesen, Abhörvorgänge für die später hinzugefügten Eigenschaften festzulegen.

Vue.set('diese.Daten','m','10')
this.$set('this.data','m','10') //Füge dem Datenobjekt der VM den Wert Attribut m mit dem Wert 10 hinzu

3. Array-Mutation

Beim Hinzufügen von Daten zu einem Array kann die Anzahl der neuen Hinzufügungen nicht kontrolliert werden, sodass nicht alle Datenwerte im Voraus deklariert werden können und es zu mühsam ist, sie einzeln festzulegen. Darüber hinaus ist das Array einer der häufig verwendeten Objektdatentypen. Daher hat der Autor von Vue die Funktionen zum Hinzufügen und Löschen von Arrays wie Push und Pop manipuliert. Wenn Benutzer Vue zum Hinzufügen und Löschen von Arrays verwenden, verwenden sie weiterhin Push und Pop, aber es werden zusätzliche Verarbeitungen darin durchgeführt. Diese manipulierten APIs überwachen den Datenproxy auf das Hinzufügen des Arrays und ändern die UI-Ansicht entsprechend der Datenantwort.

Das Obige ist der detaillierte Inhalt eines vertieften Verständnisses der Datenreaktionsfähigkeit von Vue. Weitere Informationen zur Datenreaktionsfähigkeit von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!