Eingehender Reaktionsprinzip
Wir haben bereits über die meisten grundlegenden Inhalte gesprochen, und jetzt werden wir über den zugrunde liegenden Inhalt sprechen. Eines der wichtigsten Merkmale von VUE.JS ist das Antwortsystem - das Modell ist nur ein normales Objekt, und das Ändern der Ansicht wird die Aktualisierung der Ansicht aktualisieren. Dies macht das Staatsmanagement sehr einfach und intuitiv, aber es ist auch wichtig, seine Prinzipien zu verstehen und einige häufige Probleme zu vermeiden. Als nächstes werden wir tief in die zugrunde liegenden Details des Vue.js -Antwortsystems eintauchen.
So verfolgen Sie Veränderungen
Wenn Vue.js ein normales Objekt als Datenoption an die VUE -Instanz übergeben, durchquert Vue.js seine Eigenschaften und wandelt sie in Getter/Setter mit Object.DefineProperty um. Dies ist eine ES5 -Funktion und kann nicht mit Patches implementiert werden. Deshalb unterstützt Vue.js IE8 und niedriger nicht.
Benutzer können Getter/Setzer nicht sehen, aber intern lassen sie Vue.js Abhängigkeiten verfolgen und Änderungen, die auf Eigenschaften zugegriffen und geändert werden. Ein Problem ist, dass die Formatierung von Gettter/Setter bei Drucken von Datenobjekten in der Browserkonsole unterschiedlich ist und die Verwendung der Instanzmethode $ log () mithilfe der Instanzmethode mit VM.
Jede Anweisung/Datenbindung in der Vorlage hat ein entsprechendes Beobachterobjekt, das die Attribute als Abhängigkeiten während des Berechnungsprozesses aufgezeichnet hat. Wenn der abhängige Setter aufgerufen wird, wird die Neuberechnung der Beobachter ausgelöst, wodurch auch seine zugehörigen Anweisungen das DOM aktualisiert werden.
Erkennungsproblem ändern
Aufgrund von ES5 -Beschränkungen kann Vue.js die Zugabe oder Entfernung von Objekteigenschaften nicht erkennen. Da Vue.js die Eigenschaft bei Getter/Setter beim Initanzen umwandelt, muss sich die Eigenschaft auf dem Datenobjekt befinden, damit Vue.js sie umwandeln, um sie reaktionsschnell zu machen. Zum Beispiel:
var data = {a: 1} var vm = new Vue ({data: data}) // `vm.a` und` Data.a` sind jetzt reaktionsschnell vm.b = 2 // `vm.b` ist nicht reaktionsschnell data.b = 2 //` Data.b` ist nicht reaktionsfähigEs gibt jedoch eine Möglichkeit, Attribute nach der Instanzerstellung hinzuzufügen und sie reaktionsschnell zu machen.
Für VUE -Instanzen können Sie die $ -Set -Instanzmethode (Schlüssel, Wert) verwenden:
vm. $ set ('b', 2) // `vm.b` und` data.b` sind jetzt reaktionsschnellFür normale Datenobjekte die globale Methode vue.set (Objekt, Schlüssel, Wert):
Vue.set (Data, 'C', 3) // `vm.c` und` Data.c` reagieren jetzt an
Manchmal möchten Sie einem vorhandenen Objekt einige Eigenschaften hinzufügen, z. B. die Verwendung von Object.assisign () oder _.extend (), um Eigenschaften hinzuzufügen. Neue Eigenschaften, die dem Objekt hinzugefügt wurden, auslösen jedoch keine Aktualisierungen. Zu diesem Zeitpunkt können Sie ein neues Objekt erstellen, einschließlich der Eigenschaften des ursprünglichen Objekts und der neuen Eigenschaften:
// Verwenden Sie nicht `Object.assign (this.someObject, {a: 1, b: 2})` this.someObject = Object.assisign ({}, this.someObject, {a: 1, b: 2})Es gibt auch einige Array-bezogene Themen, die zuvor in der Listenrevision erörtert wurden.
Daten initialisieren
Obwohl VUE.JS eine API bereitstellt, um Antwortattribute dynamisch hinzuzufügen, wird empfohlen, alle Antwortattribute für Datenobjekte zu deklarieren.
Tu das nicht:
var vm = new vue ({template: '<div> {{msg}} </div>'}) // Dann fügen Sie `Msg`vm. $ set ('msg', 'Hallo!'Tun Sie das:
var vm = new vue ({data: {// deklarieren `msg` msg: ''}, template: '<div> {{msg}} </div>'}) // dann setze` msg`vm.msg = 'Hallo!Es gibt zwei Gründe dafür:
1. Das Datenobjekt ist wie ein Schema des Komponentenzustands. Wenn Sie alle Eigenschaften darauf deklarieren, erleichtert der Komponentencode das Verständnis.
2. Das Hinzufügen einer Reaktion auf der obersten Ebene zwingt alle Beobachter, sich neu zu berechnen, da es vorher nicht existierte und kein Beobachter es verfolgt. Diese Leistung ist normalerweise akzeptabel (insbesondere im Vergleich zu den schmutzigen Schecks von Angular), kann jedoch bei der Initialisierung vermieden werden.
Asynchrone Update -Warteschlange
Vue.js standardmäßig asynchron das DOM aktualisiert. Immer wenn Datenänderungen beobachtet werden, startet VUE eine Warteschlange, um alle Datenänderungen in derselben Ereignisschleife zu leiten. Wenn ein Beobachter mehrmals abgefeuert wird, wird er nur einmal in die Warteschlange geschoben. Warten Sie bis zur nächsten Ereignisschleife, Vue löscht die Warteschlange und führt nur die erforderlichen DOM -Updates durch. MutationObserver wird in internen asynchronen Warteschlangen bevorzugt, und SetTimeout (FN, 0) wird verwendet, wenn sie nicht unterstützt werden.
Beispielsweise wird das DOM mit vM.Somedata = 'neuer Wert' nicht sofort aktualisiert, sondern das nächste Mal aktualisiert, wenn die Ereignisschleife die Warteschlange löscht. Wir müssen uns im Grunde nicht um diesen Prozess kümmern, aber es hilft, wenn Sie nach dem Aktualisieren des DOM -Status etwas tun möchten. Obwohl Vue.js Entwickler dazu ermutigt, den datengesteuerten Ansatz zu befolgen und das DOM direkt zu ändern, ist dies manchmal der Fall. Um auf Vue.js zu warten, um die Aktualisierung der DOM nach den Datenänderungen abzuschließen, können Sie Vue.NextTick (Rückruf) unmittelbar nach den Datenänderungen verwenden. Der Rückruf wird aufgerufen, nachdem das DOM -Update abgeschlossen ist. Zum Beispiel:
<div id = "example"> {{msg}} </div>
var vm = new vue ({el: '#example', data: {msg: '123'}}) vm.msg = 'New Message' // Data vm.Diese Instanzmethode ist bequemer, da sie keinen globalen VUE benötigt und dieser Rückruf automatisch an die aktuelle VUE -Instanz gebunden ist:
Vue.comPonent ('Beispiel', {Vorlage: '<span> {{msg}} </span>', Daten: function () {return {msg: 'nicht aktualisiert'}}, Methoden: {UpdateMessage: function () {this.msg = 'aktualisiert' console.log (this. () {console.log (this. $ el.TextContent) // => 'Aktualisiert'})}}})Das Geheimnis der Computerattribute
Sie sollten beachten, dass die berechneten Eigenschaften von Vue.js keine einfachen Getter sind. Computereigenschaften verfolgen die Reaktionsabhängigkeiten kontinuierlich. Bei der Berechnung einer berechneten Eigenschaft aktualisiert Vue.js seine Abhängigkeitsliste und zwischengespeichert die Ergebnisse. Die zwischengespeicherten Ergebnisse sind nur ungültig, wenn sich eine der Abhängigkeiten ändert. Solange sich die Abhängigkeit nicht ändert, wird der Zugriff auf die berechnete Eigenschaft das zwischengespeicherte Ergebnis direkt zurückgeben, anstatt Getter aufzurufen.
Warum Cache? Nehmen wir an, wir haben eine hochverbrauchte Berechnungseigenschaft A, die durch ein riesiges Array iterieren und viele Berechnungen durchführen wird. Anschließend kann es andere berechnete Eigenschaften geben, die von A abhängen. Wenn es keinen Cache gibt, nennen wir A's Getter mehrmals, mehr als nötig.
Da die berechnete Eigenschaft zwischengespeichert wird, wird Getter beim Zugriff nicht immer aufgerufen. Betrachten Sie das folgende Beispiel:
var vm = new vue ({data: {msg: 'hi'}, berechnet: {Beispiel: function () {return date.now () + this.msg}}})Das Beispiel für Computereigenschaften hat nur eine Abhängigkeit: vm.msg. Datum.Now () ist keine Antwortabhängigkeit, da es nichts mit dem Datenbeobachtungssystem von VUE zu tun hat. Bei dem Zugriff auf VM.Example bleibt der Zeitstempel daher unverändert, es sei denn, VM.MSG ändert sich.
Manchmal hoffe ich, dass Getter das ursprüngliche Verhalten nicht ändert und Getter jedes Mal anruft, wenn ich auf VM.Example zugriff. Zu diesem Zeitpunkt kann der Cache für das angegebene berechnete Attribut ausgeschaltet werden:
Berechnet: {Beispiel: {Cache: false, get: function () {return date.now () + this.msg}}}Jedes Mal, wenn Sie auf VM.Example zugreifen, ist der Zeitstempel neu. Der Zugriff auf JavaScript ist jedoch genau so. Die Datenbindung wird weiterhin durch Abhängigkeiten angetrieben. Wenn das berechnete Attribut {{Beispiel}} im Modul gebunden ist, wird das DOM nur aktualisiert, wenn sich die Antwortabhängigkeit ändert.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.