So implementieren Sie die bidirektionale Datenbindung mithilfe von Vue, Angular und React

In diesem Artikel wird hauptsächlich eine kurze Analyse der bidirektionalen Bindungsprinzipien von Vue, Angular und React Data vorgestellt. Jetzt werde ich sie mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

Traditioneller Ansatz

Front-End-Wartungsstatus, manuelle Bedienung der DOM-Aktualisierungsansicht. Das Front-End-Framework rendert Serverdaten über Vorlagen. Wenn der Benutzer eine Aktion ausführt, aktualisieren wir das DOM manuell über document.getElementBy...
Das Framework hilft bei der Trennung von Daten und Ansichten. Nachfolgende Statusaktualisierungen erfordern eine manuelle Bearbeitung des DOM, da das Framework nur zum ersten Mal rendert und keine Statusüberwachungsänderungen verfolgt.

Zwei-Wege-Datenbindung

Wenn wir das MV*-Modell in der Front-End-Entwicklung übernehmen, bezieht sich M-Modell auf das Modell, also die Daten, V - Ansicht bezieht sich auf die Ansicht, also den Teil der Seite, der angezeigt wird. Normalerweise müssen wir Code schreiben, um die vom Server erhaltenen Daten zu „rendern“ und in der Ansicht anzuzeigen. Immer wenn sich die Daten ändern, rendern wir erneut, um die Ansicht zu aktualisieren, sodass die Ansicht mit den Daten übereinstimmt.

Die Seite führt auch zu Status- und Datenänderungen durch Benutzerinteraktion. Zu diesem Zeitpunkt schreiben wir Code, um die Aktualisierung der Daten durch die Ansicht mit den Daten zu synchronisieren Synchronisieren Sie mit dem Backend-Server. Das heißt,

Verschiedene Front-End-MV*-Frameworks verfügen über unterschiedliche Verarbeitungsmethoden für die Datensynchronisierung zwischen Modell und Ansicht. Wenn Sie in Backbone Daten vom Modell zur Ansicht übertragen, können Sie das Änderungsereignis des Modells in der Ansicht abhören. Immer wenn das Modell aktualisiert wird, wird das Rendern in der Ansicht erneut ausgeführt. Die Datenübertragung von der Ansicht zum Modell kann verschiedene Ereignisse der DOM-Elemente überwachen, die der Ansicht entsprechen. Nachdem Änderungen im Ansichtsstatus erkannt wurden, werden die geänderten Daten an das Modell gesendet (durch Abhören von Ereignissen auf beiden Seiten). Im Vergleich zu Backbone geht das durch AngularJS dargestellte MVVM-Framework noch einen Schritt weiter und unterstützt diesen Datensynchronisierungsmechanismus auf Framework-Ebene, und es handelt sich um eine bidirektionale Datenbindung:

in unterschiedlich Im MVVM-Framework sind die Techniken zur Implementierung der bidirektionalen Datenbindung unterschiedlich.

AngularJS verwendet die Methode „Dirty Value Detection“ (Dirty-Value-Erkennung) und erkennt die Bindungsbeziehung zwischen allen Daten und Ansichten, um festzustellen, ob sich Daten geändert haben und möglicherweise weiterverarbeitet werden Führt zu Änderungen an anderen Daten, daher kann dieser Vorgang mehrere Male durchlaufen, bis keine Datenänderungen mehr auftreten. Anschließend werden die geänderten Daten an die Ansicht gesendet und die Seite aktualisiert. Wenn Sie die Daten des ViewModel manuell ändern, müssen Sie manuell eine „Dirty-Value-Erkennung“ auslösen, um sicherzustellen, dass die Änderungen mit der Ansicht synchronisiert werden.

VueJS verwendet die von ES5 bereitgestellte Object.defineProperty()-Methode, um Vorgänge an Daten zu überwachen und so automatisch die Datensynchronisierung auszulösen. Da die Synchronisierung außerdem für verschiedene Daten ausgelöst wird, können Änderungen genau an die gebundene Ansicht gesendet werden, anstatt einen Test für alle Daten durchzuführen.

Die bidirektionale Datenbindung von Vue implementiert

die Bindung und Synchronisierung von Daten und Ansichten, was sich letztendlich im Prozess des Lesens und Schreibens von Daten, also Objekten, widerspiegelt .defineProperty () im Datensatz und definierte Funktionen abrufen. Die Funktion in Vue ist defineReactive. In der vereinfachten Version der Implementierung habe ich nur einige grundlegende Funktionen beibehalten:

  function defineReactive(obj, key, value){
    var dep = new Dep();
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactGetter(){
        if(Dep.target){
          dep.depend();
        }
        return value;
      },
      set: function reactSetter(newVal){
        if (value === newVal) {
          return;
        } else {
          value = newVal;
          //如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）
          dep.notify();
        }
      }
    })
  }

Wenn beim Lesen von Daten derzeit ein Beobachter (ein Beobachter der Daten) vorhanden ist, ist der Beobachter verantwortlich zum Senden der erfassten neuen Daten an die Ansicht), dann den Watcher an die aktuellen Daten binden (dep.depend(), dep ordnet die aktuellen Daten allen Watcher-Abhängigkeiten zu), was ein Prozess zum Überprüfen und Aufzeichnen von Abhängigkeiten ist. Wenn sich beim Zuweisen von Daten die Daten ändern, werden alle Beobachter benachrichtigt (mit dep.notify()). Auf diese Weise kann das Framework die Daten automatisch mit der Ansicht synchronisieren, selbst wenn wir die Daten manuell ändern.

Identifizierungsprozess der Datenbindungsbeziehung

Sowohl in Vue als auch in AngularJS erfolgt die Bindungsbeziehung zwischen Ansichtselementen und Daten durch das Hinzufügen von Anweisungen in der HTML-Deklaration

  <form id="test">
    <input type="text" v-model="name">
  </form>

Der obige HTML-Code zeigt an, dass das Eingabeelement an die Namensdaten gebunden ist. Sie können es wie folgt im JS-Code initialisieren:

  var vm = new Vue({
   el: '#test',
   data: {
    name: 'sysuzhyupeng'
   }
  })

Nachdem der Code korrekt ausgeführt wurde, wird an der Position, die dem Eingabeelement auf der Seite entspricht, der im obigen Code angegebene Anfangswert angezeigt: sysuzhyupeng.

Nach der Ausführung von vm.name = ‚zhyupeng‘ wird die Eingabe auf der Seite ebenfalls aktualisiert und zeigt nun Folgendes an: zhyupeng. Ändern Sie den Inhalt im Seitentextfeld in: yupeng, dann lautet der über vm.name erhaltene Wert: 'yupeng'

React-Datenbindung

React verwendet diese Methode Erwägen Sie die Aktualisierung des virtuellen DOM-Baums:

1. Attributaktualisierung, die Komponente erledigt dies selbst

2. Strukturaktualisierung, erneutes Rendern des Teilbaums (virtuelles DOM), Ermitteln der minimalen Änderungsschritte, Verpacken von DOM-Vorgängen und Patchen des echten DOM-Baums

Rein aus der Perspektive der Datenbindung hat React Virtual DOM keine Datenbindung, da setState() den vorherigen Status nicht beibehält (der Status wird verworfen) und es keine Bindung gibt

Aus der Perspektive des Datenaktualisierungsmechanismus , Reagieren Sie ähnlich wie bei der Bereitstellung eines Datenmodells (muss über den Status aktualisiert werden)

Wenn es keine bidirektionale Datenbindung gibt, wie implementiert man dann das bidirektionale Eingabeszenario? Durch die vom Framework bereitgestellte API ist die manuelle Benachrichtigung über Datenänderungen der Funktionsweise von DOM sehr ähnlich.

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie den Kreuzkoordinaten-Folge-Maus-Effekt in JS

So verwenden Sie das EasyUI-Fenster in jQuery

So verwenden Sie das Datums-Plug-in vonlaydate.js in Angular4.0

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die bidirektionale Datenbindung mithilfe von Vue, Angular und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!