Wie man Lokalstorage in Vue reaktiv macht

Vue.js 'Responsive System ist eine seiner Kernstärken, aber es kann sich für jeden, der seine zugrunde liegenden Mechanismen nicht versteht, mysteriös anfühlt. Warum funktioniert es zum Beispiel mit Objekten und Arrays, aber nicht mit anderen Dingen wie Lokalstorage? In diesem Artikel wird diese Frage beantwortet und demonstriert, wie das reaktionsschnelle System von VUE mit LocalStorage zusammenarbeitet.

Wenn Sie den folgenden Code ausführen, werden Sie feststellen, dass der Zähler als statischer Wert angezeigt wird und sich aufgrund von Intervalländerungen in LocalStorage nicht wie erwartet ändert:

 neuer Vue ({{
  EL: "#counter",
  Daten: () => ({{{
    Zähler: LocalStorage.getItem ("Zähler")
  }),
  berechnet: {
    Sogar() {
      Rückgabe dies.Counter % 2 == 0;
    }
  },
  Vorlage: `<div>
    <div>Zähler: {{counter}}</div>
    <div>Zähler ist {{sogar? 'sogar': 'seltsam'}}</div>
  </div>`
});

 // irgendwann-andere-file.js
setInterval (() => {
  const counter = localStorage.getItem ("counter");
  LocalStorage.SetItem ("Zähler", Zähler 1);
}, 1000);

Obwohl counter Gegeneigenschaft innerhalb der VUE -Instanz reaktionsschnell ist, ändert sie sich nicht, nur weil wir ihre Quelle in LocalStorage geändert haben.

Es gibt viele Möglichkeiten, dieses Problem zu lösen, und der beste Weg ist wahrscheinlich, Vuex zu verwenden und die gespeicherten Werte mit LocalStorage synchronisiert zu halten. Aber was ist, wenn wir nur eine Lösung brauchen, die so einfach wie in diesem Beispiel ist? Wir müssen ein detailliertes Verständnis dafür haben, wie die reaktionsschnellen Systeme von Vues funktionieren.

Reaktionsfähigkeit in Vue

Wenn VUE eine Komponenteninstanz initialisiert, werden data beobachtet. Dies bedeutet, dass es über alle Eigenschaften in data iteriert und sie mit Object.defineProperty in Getter/Setter konvertiert wird. Durch das Festlegen eines benutzerdefinierten Setzers für jede Eigenschaft kann Vue wissen, wann sich die Eigenschaft ändert, und können Abhängigkeiten benachrichtigen, die auf die Änderung reagieren müssen. Woher weiß es, welche Abhängigkeiten von einer bestimmten Eigenschaft abhängen? Durch die Nutzung von Gettern kann es registriert werden, wenn berechnete Eigenschaften, Beobachterfunktionen oder Rendering -Funktionen auf Dateneigenschaften zugreifen.

 // Core/Instance/state.js
Funktion initdata () {
  // ...
  beobachten (Daten)
}

 // Core/Observer/index.js
Exportfunktion beobachten (Wert) {
  // ...
  neuer Beobachter (Wert)
  // ...
}

Exportklassenbeobachter {
  // ...
  Konstruktor (Wert) {
    // ...
    this.walk (Wert)
  }

  Walk (obj) {
    const keys = Objekt.Keys (OBJ)
    für (sei i = 0; i <keys.length i definiere schl><p> Warum ist LocalStorage nicht reaktionsschnell? <strong>Weil es kein Objekt mit Attributen ist.</strong></p>
<p> Aber warte. Wir können Getters und Setter nicht mit Arrays definieren, aber in Vue reagieren Arrays immer noch. Dies liegt daran, dass Arrays ein Sonderfall in Vue sind. Um reaktionsschnelle Arrays zu haben, hat Vue die Array -Methoden hinter den Kulissen neu geschrieben und sie in das Responsive -System von Vues integriert.</p>
<p> Können wir etwas Ähnliches wie Lokalstorage tun?</p>
<h3 id="Schreiben-Sie-die-Lokalstorage-Funktion-neu"> Schreiben Sie die Lokalstorage -Funktion neu</h3>
<p> Zunächst können wir unser erstes Beispiel beheben, indem wir die LocalStorage -Methode überschreiben, um zu verfolgen, welche Komponenteninstanzen das LocalStorage -Projekt angefordert haben.</p>
<p> // Karte zwischen LocalStorage -Projektschlüssel und der Liste der VUE -Instanzen, die von IT const StoreItemSubScriptions = {} abhängen;</p>
<p> const getItem = window.localStorage.getItem; localStorage.getItem = (Schlüssel, Ziel) => {console.info ("Get", Schlüssel);</p>
<p> // Abhängige VUE -Instanzen sammeln if (! StoresItemSubSchers [Key]) storchEsemsUbScribieren [Key] = []; if (Ziel) storeItemSubSchers [Schlüssel] .push (Ziel);</p>
<p> // rufen Sie die ursprüngliche Funktion return getItem.call (LocalStorage, Key) auf; };</p>
<p> const setItem = window.localStorage.setItem; localStorage.setItem = (Schlüssel, Wert) => {console.info ("Einstellung", Schlüssel, Wert);</p>
<p> // Aktualisieren Sie den Wert in der VUE -Instanz, die davon abhängt, ob (storeteItemsUbScriptions [Key]) {storeItemsUbScriptions [Schlüssel] .foreach ((DEP) => {if (dep.hasownProperty (Schlüssel)) DEP [Key] = value;}); }</p>
<p> // rufen Sie die ursprüngliche Funktion setItem.call auf (LocalStorage, Schlüssel, Wert); };</p>
<p> // ... (Der Rest des Code ist der gleiche wie der Originaltext)</p>
<p> In diesem Beispiel haben wir <code>getItem</code> und <code>setItem</code> neu definiert, um Komponenten zu sammeln und zu benachrichtigen, die von lokalen Storage -Projekten abhängen. Im neuen <code>getItem</code> erfassen wir, welche Komponenten welchen Element anfordern, und im <code>setItem</code> kontaktieren wir alle Komponenten, die das Element anfordern und seine Dateneigenschaften neu schreiben.</p>
<p> Damit der oben genannte Code funktioniert, müssen wir einen Verweis auf die Komponenteninstanz übergeben, um <code>getItem</code> zu erhalten, das seine Funktionssignatur ändert. Wir können die Pfeilfunktion nicht mehr verwenden, sonst haben wir nicht den richtigen Wert <code>this</code> .</p>
<p> Wenn wir es besser machen wollen, müssen wir tiefer graben. Wie können wir beispielsweise Abhängigkeiten verfolgen, ohne sie explizit zu verabschieden?</p>
<h3 id="Wie-man-Abhängigkeiten-in-Vue-sammelt"> Wie man Abhängigkeiten in Vue sammelt</h3>
<p> Zur Inspiration können wir wieder zu Vue's Responsive System zurückkehren. Wir haben zuvor beim Zugriff auf eine Dateneigenschaft gesehen, dass der Getter der Dateneigenschaft den Anrufer für weitere Änderungen an dieser Eigenschaft abschließt. Aber woher weiß es, wer den Anruf getätigt hat? Wenn wir das Datenattribut erhalten, hat die Getter -Funktion keinen Eingang darüber, wer der Anrufer ist. Die Getter -Funktion hat keine Eingabe. Woher weiß es, wen man sich als Abhängigkeit registrieren kann?</p>
<p> Jedes Datenattribut behält eine Liste seiner Abhängigkeiten bei, die in einer <code>Dep</code> -Klasse reagieren müssen. Wenn wir tiefer in diese Klasse eintauchen, können wir sehen, dass die Abhängigkeit selbst in einer statischen Zielvariablen bereits definiert ist, wenn eine Abhängigkeit registriert ist. Dieses Ziel wird bisher von einer mysteriösen <code>Watcher</code> festgelegt. Wenn sich die Dateneigenschaften ändern, werden diese Beobachter tatsächlich mitgeteilt, dass sie die Wiederaufnahme von Komponenten oder die Neuüberwachung von berechneten Eigenschaften einleiten.</p>
<p> Aber wer sind sie wieder?</p>
<p> Wenn Vue die Datenoption beobachtbar macht, werden auch Beobachter für jede berechnete Attributfunktion sowie alle Beobachtungsfunktionen (die nicht mit <code>Watcher</code> verwechselt werden) und die Rendering -Funktion für jede Komponenteninstanz erstellt. Der Beobachter ist wie ein Begleiter dieser Funktionen. Sie machen zwei wichtigste Dinge:</p>
<ol>
<li> <strong>Sie bewerten Funktionen zur Erstellungszeit.</strong> Dies löst die Sammlung von Abhängigkeiten aus.</li>
<li> <strong>Wenn sie mitgeteilt werden, dass sich der Wert, von dem sie abhängt, geändert hat, haben sie ihre Funktionen erneut übertragen.</strong> Dies wird schließlich die berechneten Eigenschaften neu berechnen oder die gesamte Komponente neu erstellen.</li>
</ol>
<p> Ein wichtiger Schritt tritt auf, bevor der Beobachter die Funktionen aufruft, für die sie verantwortlich sind: <strong>Sie setzen sich als Ziele in statischen Variablen in <code>Dep</code> -Klasse.</strong> Dies stellt sicher, dass bei Zugriff auf reaktionsschnelle Datenattribute sie als Abhängigkeiten registriert werden.</p>
<h3 id="Track-der-LocalStorage-angerufen-hat"> Track, der LocalStorage angerufen hat</h3>
<p> Wir können das nicht vollständig tun, weil wir nicht auf Vue's interne Mechanismen zugreifen können. Wir können jedoch die Idee von Vue verwenden, um den Beobachter das Ziel in einer statischen Eigenschaft festlegen zu lassen, bevor wir die Funktion aufrufen, für die er verantwortlich ist. Können wir einen Verweis auf die Komponenteninstanz festlegen, bevor wir LocalStorage aufrufen?</p>
<p> Wenn wir davon ausgehen, dass LocalStorage beim Festlegen von Datenoptionen aufgerufen wird, können wir uns darauf einstellen, dass <code>beforeCreate</code> und <code>created</code> . Diese beiden Haken werden vor und nach der Initialisierung der Datenoption abgefeuert, sodass wir sie festlegen und dann eine Zielvariable unter Bezugnahme auf die aktuelle Komponenteninstanz löschen können (wir können auf sie im Lebenszyklushaken zugreifen). In unserem benutzerdefinierten Getter können wir dieses Ziel als Abhängigkeit registrieren.</p>
<p> Das Letzte, was wir tun müssen, ist, diese Lebenszyklushaken zu einem Teil aller unserer Komponenten zu machen. Wir können dies mit Global Mixin für das gesamte Projekt tun.</p>
<p> // ... (Der Rest des Code ist der gleiche wie der Originaltext)</p>
<p> Wenn wir jetzt das erste Beispiel ausführen, erhalten wir einen Zähler, der die Anzahl pro Sekunde erhöht.</p>
<p> // ... (Der Rest des Code ist der gleiche wie der Originaltext)</p>
<h3 id="Das-Ende-unseres-Gedankenexperiments"> Das Ende unseres Gedankenexperiments</h3>
<p> Denken Sie zwar das anfängliche Problem, denken Sie daran, dass dies hauptsächlich ein Gedankenexperiment ist. Es fehlen einige Funktionen, wie z. B. die Behandlung gelöschter Projekte und deinstallierte Komponenteninstanzen. Es hat auch einige Einschränkungen, wie der Eigenschaftsname der Komponenteninstanz mit dem in LocalStorage gespeicherten Projektnamen übereinstimmen. Das Hauptziel ist das Hauptziel, besser zu verstehen, wie Vue Responsive -Systeme hinter den Kulissen funktionieren und das Beste daraus machen. Ich hoffe, dass Sie das von allem bekommen.</p></keys.length>

Das obige ist der detaillierte Inhalt vonWie man Lokalstorage in Vue reaktiv macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!