Detaillierte Analyse des Reaktionsprinzips und der bidirektionalen Daten von Vue

Verstehen von object.defineProperty, um Reaktionsfähigkeit zu erreichen

Wissen, worauf sich „observe/watcher/dep“ bezieht

Verstehen Sie das Publish-Subscribe-Modell und die spezifischen Probleme, die es löst

Es gibt im Allgemeinen zwei Lösungen, um Datenreaktionsfähigkeit in Javascript zu implementieren, die den von vue2.x bzw. vue3.x verwendeten Methoden entsprechen. Diese sind:

Abfangen von Objekteigenschaft (vue2.x) Object.defineProperty
Objektproxy (vue3.x)

Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden

Was ist Vue-Responsive?

Eines der einzigartigsten Merkmale von Vue ist sein nicht-intrusives Reaktivitätssystem. Datenmodelle sind einfach nur JavaScript-Objekte. Und wenn Sie sie ändern, wird die Ansicht aktualisiert. Dadurch wird die Statusverwaltung ziemlich unkompliziert, es ist jedoch wichtig zu verstehen, wie sie funktioniert, damit Sie einige häufige Probleme vermeiden können. In diesem Abschnitt untersuchen wir

Die Details auf niedriger Ebene des Reaktionssystems von Vue.

Wie implementiere ich Vue-Reaktionsfähigkeit?

Datenreaktivität: Das Datenmodell ist nur ein gewöhnliches JavaScript-Objekt. Wenn wir die Daten ändern, wird die Ansicht aktualisiert, wodurch häufige DOM-Operationen vermieden und die Entwicklungseffizienz verbessert werden. Dies unterscheidet sich von JQuery, das häufig DOM betreibt.

Grundlegendes zur bidirektionalen Datenbindung

Wenn sich die Daten ändern, ändert sich die Ansicht, und wenn sich die Ansicht ändert, ändern sich die Daten entsprechend (anhand dieses Satzes können wir erkennen, dass die Datenreaktionsfähigkeit in der bidirektionalen Bindung enthalten ist).

Wir können v-model verwenden, um eine bidirektionale Datenbindung für Formularelemente zu erstellen

Datengesteuert ist eines der einzigartigsten Merkmale von Vue

Während des Entwicklungsprozesses müssen Sie sich nur auf die Daten selbst konzentrieren, nicht darauf, wie die Daten in der Ansicht gerendert werden. Gängige MVVM-Frameworks haben Datenreaktionsfähigkeit und bidirektionale Bindung implementiert, sodass Daten an das DOM gebunden werden können.

In vue.js bedeutet „datengesteuert“, dass sich die Benutzeroberfläche bei Datenänderungen entsprechend ändert und Entwickler das DOM nicht manuell ändern müssen.

Verständnis von datengesteuerten:

Wie also erreicht Vuejs diesen datengesteuerten Ansatz?

Vue implementiert die bidirektionale Datenbindung hauptsächlich durch die Verwendung von Datenentführung in Kombination mit dem Publisher-Subscriber-Modell, indem der Setter und Getter jedes Attributs über Object.defineProperty() entführt wird und bei Datenänderungen Nachrichten an Abonnenten veröffentlicht werden, wodurch entsprechende Überwachungs-Callbacks ausgelöst werden. Wenn Sie ein einfaches JavaScript-Objekt als Datenoption an eine Vue-Instanz übergeben, iteriert Vue über dessen Eigenschaften und konvertiert sie mit Object.defineProperty in Getter/Setter. Getter/Setter sind für den Benutzer nicht sichtbar, aber intern ermöglichen sie es Vue, Abhängigkeiten zu verfolgen und Änderungen zu melden, wenn auf Eigenschaften zugegriffen wird und diese geändert werden.

Zweiwege-Datenbindung von Vue

Verwenden Sie MVVM als Einstiegspunkt für die Datenbindung, integrieren Sie Observer, Compile und Watcher, verwenden Sie Observer, um die Datenänderungen Ihres eigenen Modells zu überwachen, verwenden Sie Compile, um die Anweisungen zur Kompilierungsvorlage zu analysieren (wird zum Analysieren von {{}} in Vue verwendet) und verwenden Sie schließlich Watcher, um eine Kommunikationsbrücke zwischen Observer und Compile aufzubauen, um den bidirektionalen Bindungseffekt von Datenänderung -> Ansichtsaktualisierung; Ansichtsinteraktionsänderung (Eingabe) -> Datenmodelländerung zu erzielen.

Analyse von Vue-bidirektionalen Daten? /v-model Das Prinzip der bidirektionalen Datenbindung

Der Code lautet wie folgt (Beispiel):

  <Skript>
    // Objektwert in Groß- und Kleinschreibung schreiben let data = {
      Name: 'Li Bai',
      Alter: 18
    }

    Objekt.Schlüssel(Daten).fürJeden(Schlüssel => {
      defineReactiveProperty(Daten, Schlüssel, Daten[Schlüssel])
    })

    Funktion defineReactiveProperty(Daten, Schlüssel, Wert) {
      Object.defineProperty(Daten, Schlüssel, {
        // erhalten() {
          Rückgabewert
        },
        // Wert setzen set(newVaue) {
          wenn (neuerWert === Wert) {
            zurückkehren
          }
          Wert = neuerWert
          kompilieren()
        }
      })
    }
    kompilieren()
  </Skript>
</body>

</html>

 
 Funktion compine () {
  // Alle untergeordneten Elemente unter der App über document.querySelect('#app').childNodes abrufen const nodes = document.querySelector('#app').childNodes
  // Diesen Wert ausgeben. Der aktuelle Wert ist ein verschachteltes Array. Wir verwenden foreach 
  // konsole.log(Knoten)

  nodes.forEach(item => {
    // Element erneut ausgeben html:49 <input type=​"text" v-model=​"name">​ ist ein Eingabefeld // console.log(item)
    // Filtere die aktuellen Labels heraus, da die Ausgabe der Knoten den Raum als „Text“ vom Knotentyp 3 verwendet und das Label vom Knotentyp 1 ist, wenn entschieden wird, dass es ein Label ist, wenn (item.nodeType === 1) {
     const attrs = Artikel.Attribute
      // console.log(attrs) {0: Typ, 1: v-Modell, Typ: Typ, v-Modell: v-Modell, Länge: 2} gibt ein Array zurück Array.from(attrs).forEach(arr => {
        // console.log(arr) // texgt= 'text' v-mode: 'name' , filtere dieses v-Modell heraus
        wenn (arr.nodeName === 'v-model'){
            Artikel.Wert = Daten[arr.Knotenwert]
            item.addEventListener('Eingabe',e => {
              Konsole.log(e.Ziel.Wert)
              //  
              Daten[arr.nodeValue] = e.target.value
            })
        }
      })
   }
  })
}

Zusammenfassen

• Die Implementierung der Datenreaktionsfähigkeit ist nichts anderes als das Abfangen von Objekteigenschaften. Wir verwenden Object.defineProperty zur Implementierung und verwenden zur Optimierung die Proxy-Objektproxylösung in vue3.
• Mehrere Fachbegriffe, die im Interviewleitfaden erwähnt werden
  Das Beobachtungsobjekt ist ein Objekt, das Daten zu einem reagierenden Objekt verarbeitet.
  Watcher bezieht sich eigentlich auf die Aktualisierungsfunktion nach Datenänderungen (in Vue gibt es zwei Arten von Watchern: einen zum Aktualisieren der Ansicht und einen über das Watch-Konfigurationselement deklarierten Watcher).
  dep bezeichnet die Objekte, die Update-Funktionen sammeln und Update-Funktionen auslösen, die mit Publish und Subscribe implementiert wurden.
• Der Kern der Anweisungsimplementierung besteht darin, nichts anderes zu tun, als den Bezeichner durch Kompilieren der Vorlage zu finden, die Daten dann daran zu binden und ihn nach einer Datenänderung erneut einzufügen.
• Der Kern des Publish-Subscribe-Modells besteht darin, das Eins-zu-viele-Problem zu lösen und genaue Aktualisierungen nach Datenänderungen in Vue zu implementieren.

Dies ist das Ende dieses Artikels über die Reaktionsprinzipien und bidirektionalen Daten von Vue. Weitere relevante Inhalte zu den Reaktionsprinzipien und bidirektionalen Daten von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!