Wie verfolgt Vue Datenänderungen?

Hintergrund

Diese Situation kommt bei der Arbeit immer wieder vor: Die auf der Seite angezeigten Daten sind falsch und müssen von Front-End-Kollegen gesucht werden.

In einer mit Vue erstellten SPA-Anwendung können die letztendlich auf der Seite angezeigten Daten von der Initialisierung bis zur endgültigen Anzeige einfach oder komplex sein. Wenn Sie auf komplexe Datenflüsse stoßen, wird die Fehlerbehebung ohne eine geeignete Methode zu einer wahren Tortur.

Wenn Sie den Aufrufstapel bei Datenänderungen sehen können, wissen Sie, was vor der Generierung der falschen Daten passiert ist und welcher Fehlerschritt zum endgültigen Fehler geführt hat. Indem Sie den Hinweisen im Aufrufstapel folgen, können Sie das Problem schnell lokalisieren.

Beispiel

<Vorlage>
  <div>
    <!-- Erwartete Ausgabe: hallo, Welt -->
    <!-- Tatsächliche Ausgabe: hallo,wolld -->
    {{ msg }}
    <button @click="f1">Nachricht ändern</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Nachricht: 'hallo,',
    }
  },
  Methoden: {
    f1() {
      diese.msg += 'w'
      dies.f2();
    },
    f2() {
      diese.msg += "oo";
      dies.f3();
    },
    f3() {
      diese.msg += 'ld'
    }
  }
};
</Skript>

Missverständnis - Festlegen von Haltepunkten in Watch, um den Aufrufstapel anzuzeigen

Wir können die Rückrufe von f1 und msg im Aufrufstapel auf der rechten Seite der Seite sehen, aber wir können f2 und f3 nicht sehen. Das heißt, f2 und f3 gehen verloren, aber tatsächlich ist es f2, das den Datenfehler verursacht.

Warum gehen die Anrufinformationen von f2 und f3 verloren?

Da f1, f2 und f3 alle msg geändert haben, wurde der Watcher von msg in derselben Mikrotask ausgelöst. Da f1 zuerst ausgelöst wurde, war das Auslösen von f2 und f3 ungültig. Wenn der Watcher-Rückruf schließlich ausgeführt wird, erinnert er sich nur daran, dass er durch f1 ausgelöst wurde, sodass der Aufrufstapel zu diesem Zeitpunkt nur die Informationen von f1 sehen kann.

Der richtige Ansatz

Gehen Sie zu node_modules\vue\dist\vue.runtime.esm.js und fügen Sie einen Haltepunkt in der Set-Methode der Funktion defineReactive hinzu. Der Schlüssel hier ist der Name der zu überwachenden Variable.

Hier können Sie den vollständigen Vorgang der Nachrichtenänderung verfolgen und schnell das durch f2 verursachte Problem lokalisieren.

Zusammenfassen

Durch die Anzeige des Aufrufstapels können Sie schnell lokalisieren, wo der Datenfehler auftritt, ohne mit dem Projekt vertraut zu sein. Im Vergleich zur Verwendung von console.log oder dem hohen Zeitaufwand für das Sortieren der Codelogik kann die Datenflussmethode eine erhebliche Arbeitsbelastung reduzieren.

Oben finden Sie Einzelheiten dazu, wie Vue Datenänderungen verfolgt. Weitere Informationen dazu, wie Vue Datenänderungen verfolgt, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!