Eine detaillierte Beschreibung der Vue.observable-Funktion und ihrer Verwendung zum Erstellen responsiver Daten

Detaillierte Beschreibung der Vue.observable-Funktion und deren Verwendung zum Erstellen reaktionsfähiger Daten

Bei der Entwicklung von Webanwendungen gibt es viele Fälle, in denen wir Daten zwischen verschiedenen Komponenten austauschen müssen. Vue.js bietet eine einfache, aber leistungsstarke Möglichkeit, dieses Problem zu lösen, indem es reaktive Daten erstellt. Die Vue.observable-Funktion ist eine neue Funktion, die nach Vue.js 2.6 eingeführt wurde und es uns ermöglicht, auf einfache Weise beobachtbare Objekte zu erstellen.

Die Vue.observable-Funktion wird verwendet, um ein gewöhnliches Javascript-Objekt in ein beobachtbares Objekt umzuwandeln. Das Merkmal eines beobachtbaren Objekts besteht darin, dass es alle Orte benachrichtigt, deren Aktualisierung auf diese Eigenschaften angewiesen ist, wenn sich seine internen Eigenschaften ändern. Auf diese Weise müssen wir Datenänderungen nicht manuell verwalten, sondern lassen Vue.js dies automatisch für uns erledigen.

Sehen wir uns an, wie Sie mit der Vue.observable-Funktion reaktionsfähige Daten erstellen.

Zuerst müssen wir Vue.js installieren und importieren:

Dann erstellen wir ein normales Javascript-Objekt:

const data = {
Name: 'Alice',
Alter: 25,
E-Mail: 'alice@example.com'
};

Als nächstes verwenden wir Vue The Die Funktion .observable wandelt dieses gewöhnliche Objekt in ein beobachtbares Objekt um:

const observableData = Vue.observable(data);

Jetzt ist observableData ein beobachtbares Objekt. Wir können seine Eigenschaften direkt verwenden, genau wie bei der Verwendung eines normalen Objekts:

console.log(observableData.name); // Ausgabe: Alice

Es ist zu beachten, dass es nur dann verfügbar ist, wenn wir auf die Eigenschaften des beobachtbaren Objekts zugreifen Dann werden Änderungen von Vue.js verfolgt. Änderungen am Originalobjekt nach der Erstellung des beobachtbaren Objekts werden von Vue.js nicht bemerkt.

Wir können diese Observable auch in anderen Komponenten verwenden. Angenommen, wir haben eine Komponente A und eine Komponente B, die beide dieses beobachtbare Objekt verwenden müssen:

Komponenten-A-Code: