Detaillierte Erläuterung des Beobachtermodus ausgehend von der Komponentenwertübertragung von Vue

Beobachtermuster

Zunächst einmal erinnert mich die Erwähnung des Beobachtermusters an MVVM. Das MVVM-Architekturmuster scheint die Idee von Beobachtern zu verwenden.

Befolgen wir die Konvention und verstehen wir, was der Beobachtermodus ist.

Das Beobachtermuster ähnelt dem Publish-Subscribe-Muster. Um diese Aktion abzuschließen, müssen mindestens zwei verschiedene Objekte oder mehrere Objekte vorhanden sein. Es ähnelt eher einer Eins-zu-viele-Abhängigkeitsbeziehung, d. h. wenn sich der Zustand eines Objekts ändert, ändern sich die Zustände aller zugehörigen Objekte. Beispielsweise kann eine Person in der Moments-Funktion Hunderte von Freunden haben. Wenn ich einen Moments-Beitrag poste, sehen ihn alle meine Freunde. Wenn er einer anderen Person gefällt, erhalten alle Ihre Freunde, denen er gefällt, ebenfalls eine Benachrichtigung. Dies ähnelt sehr einem Beobachter, d. h. ich bin der Herausgeber und meine Freunde sind Abonnenten.

Vue-Pass-Wert

Dann schauen wir uns an, was Vue ist. Jeder kennt das Prinzip von Vue. Es ist ein Bottom-up-, tief reagierender, bidirektionaler Bindungsmodus, nämlich MVVM. Mit anderen Worten, Vue achtet auf Änderungen im Modell. Änderungen im Modell ermöglichen es dem MVVM-Framework, das DOM zu aktualisieren und dadurch Ansichtsänderungen zu generieren.

Hier ist ein gängiges Beispiel aus einem Projekt:

Beim Schreiben von Vue-Projekten haben wir die Wertübertragung von übergeordneten und untergeordneten Komponenten verwendet, aber wie implementiert man die Wertübertragung von übergeordneten Komponenten? Zunächst können wir Vuex verwenden, das sehr gebräuchlich ist, aber es gibt noch eine andere Methode, von der ich nicht weiß, ob Sie sie verwendet haben, nämlich Bus. Dieser Bus ist nur ein Name. Es ist egal, wie Sie ihn nennen. Sie können ihn Flugzeug oder Kanone nennen. Es ist egal. Schauen wir uns hauptsächlich an, wie es implementiert wird:

Der erste Schritt besteht darin, den Bus in main.js zu registrieren

Vue.prototype.$Bus = neues Vue()

Wir haben im Prototyp von vue eine globale Variable $Bus registriert, und ihr Wert ist die Instanz von vue. Das heißt, bis jetzt verfügt $Bus über alle Eigenschaften und Methoden von vue, was jetzt einfach zu bedienen ist.

Im zweiten Schritt beginnen wir mit dem Versenden von Nachrichten

Dies steht im Einklang mit dem Publish-Subscribe-Modell des Observer-Musters.

Wir schreiben folgenden Code in Komponente 1:

<Vorlage>
    <div>
        <button @click="send">Senden</button>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Methoden: {
        schicken () {
            this.$Bus.$emit("send",'Empfangene Informationen')
        }
    }
}
</Skript>

Klicken Sie auf die Schaltfläche, um eine Nachricht zu senden. Diese Schaltfläche fungiert als Herausgeber. Wir verwenden die $emit-API von vue. Was ist also ein Abonnent? Auch wenn ich es dir nicht gesagt habe, hättest du es erraten müssen. Ja, er ist es.

Schritt 3: Nachrichten in Komponente 3 empfangen

<Vorlage>
    <div>
        {{Nachricht}}
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Daten () {
        zurückkehren {
            Nachricht: ''
        }
    },
    montiert () {
        dies.$Bus.$on('senden', (msg) => {
            diese.Nachricht = Nachricht
        })
    }
}
</Skript>

Verwenden Sie das $on-Attribut als Empfänger

Wie aus dem Obigen ersichtlich ist, verwendet Vue die Idee der Beobachter an vielen Stellen, einschließlich seiner bidirektionalen Bindung.

Der Mechanismus von Vue

Aus dem obigen Bild können wir ersehen, dass Vue die Daten über Object.defineProperty entführt, dann dazwischen eine Übertragung durchführt und sie schließlich in der Vue-Ebene rendert.

Wir können sicher sein, dass vue.js das Beobachtermuster übernommen hat, aber ich habe das Gefühl, dass es immer noch einen kleinen Unterschied gibt. Das Beobachtermuster konzentriert sich auf ereignisgesteuerte Vorgänge. Wenn ich beispielsweise ein Haus kaufe, gibt es möglicherweise keine geeigneten Häuser, wenn ich zum ersten Mal mit dem Verkäufer spreche. Dann sagt der Verkäufer zu Ihnen: „Wenn es ein geeignetes Haus gibt, benachrichtigen wir Sie so schnell wie möglich.“ Wenn es ein neues Haus gibt, ruft er Sie an, um Sie zu informieren. Die Wurzel dieser Reihe ist das Ereignis des Hauskaufs, das den gesamten Prozess antreibt. Wie wir alle wissen, ist Vue datengesteuert, das heißt, nur wenn sich der Wert in den Daten ändert, wird Object.defineProperty ihn kapern, um das DOM zu aktualisieren und die Aktualisierung der Ansicht auszulösen.

Gibt es also etwas, das eher den Merkmalen des Beobachtermusters entspricht?

Natürlich sind es die Node.js-Ereignisse.

Schauen wir uns zunächst den Ablauf der Ereignisse an:

var Ereignisse = erfordern('Ereignisse');
//EventEmitter-Objekt erstellen var eventEmitter = new events.EventEmitter();
// Ereignishandler erstellen var connectHandler = function connected() {
   console.log('Verbindung erfolgreich.');
   // Ereignis „data_received“ auslösen eventEmitter.emit('data_received');
}
// Verbindungsereignishandler binden eventEmitter.on('connection', connectHandler);
//Verwende eine anonyme Funktion, um das Ereignis data_received zu binden eventEmitter.on('data_received', function(){
   console.log('Daten erfolgreich empfangen.');
});
//Verbindungsereignis auslösen eventEmitter.emit('connection');
console.log("Programmausführung abgeschlossen.");

Ausgabe:

Dies steht im völligen Einklang mit der Arbeitsweise des Beobachters, der von „emit“ veröffentlicht und von „on“ empfangen wird. Daher bietet node.js einen guten Überwachungsmechanismus und kümmert sich um die gesamte Transaktion. Es unterstützt den charakteristischsten E/A-Modus von nodejs. Wenn wir beispielsweise den http-Dienst starten, hören wir auf dessen Verbinden/Schließen, und wenn wir http.request verwenden, hören wir auf Daten/Ende usw.

Gibt es ähnliche Fälle?

Natürlich hat js einen Ereignislistener ---- addEventListener, der auch die Bedeutung eines Beobachters hat. Ich werde nicht näher auf seine Verwendung eingehen, ich glaube, jeder ist damit vertraut.

Tatsächlich gibt es, wenn man genau darüber nachdenkt, immer noch viele Stellen, an denen es Beobachter gibt. Die einfachste ist ein Klickereignis. Hat das nicht auch seine Bedeutung? Der Herausgeber ist eine Schaltfläche und der Empfänger kann ein Formular, eine Popup-Ebene oder etwas anderes sein.

Die Bedeutung des Beobachtermodus

Lassen Sie uns zunächst über die Vorteile sprechen:

1. Das Beobachtermuster erfordert eine Kopplung zwischen dem Beobachter und dem Beobachteten. Es erfordert eine abstraktere Art, die beiden zu verbinden.

2. Der Beobachtermodus unterstützt Broadcasting, also eine Eins-zu-viele-Beziehung. Dadurch fällt es uns leicht, an eine Technologie zu denken, nämlich Socket. Weitere Einzelheiten finden Sie im Vue-Projekt, das die WebSocket-Technologie verwendet.

Allerdings hat er auch Vor- und Nachteile:

1. Das Erstellen eines Abonnenten verbraucht eine gewisse Menge an Zeit und Speicher.

2. Beim Abonnieren einer Nachricht ist die Nachricht möglicherweise nicht aufgetreten, der Abonnent ist jedoch immer im Speicher vorhanden.

3. Das Beobachtermuster schwächt die Verbindung zwischen Objekten, was eine gute Sache ist. Bei übermäßiger Verwendung wird die Verbindung zwischen Objekten jedoch sehr tief verborgen, wodurch das Projekt schwer zu verfolgen, zu warten und zu verstehen ist.

Moment, es gibt noch ein anderes Modell, das Publish-Subscribe-Modell. Viele Leute (ich eingeschlossen) denken, es sei das Observer-Modell. Später habe ich es im Internet überprüft und festgestellt, dass sie sich immer noch unterscheiden. Man kann sagen, dass das Observer-Modell dem Publish-Subscribe-Modell sehr ähnlich ist, wirklich ähnlich, aber es gibt dennoch einige wesentliche Unterschiede. Der grundlegendste Unterschied ist das Planungszentrum.

Beispielsweise konzentriert sich das Beobachtermuster mehr darauf, dass Ziel und Beobachter abstrakte Klassen sind. Bei der Wettervorhersage ist beispielsweise Beobachter A für die Überwachung von Wetteränderungen verantwortlich. Wenn B über Wetteränderungen informiert werden möchte, muss er sich bei A registrieren. Wenn sich das Wetter ändert, löst A die Wetteränderung aus und plant die Schnittstelle von B, um die Änderungen zu aktualisieren.

Wie erreicht das Publish-Subscribe-Modell dies? Wenn A Wetteränderungen wahrnehmen will, braucht es B, die Leitstelle, und B muss sich auf den Auslöser von C verlassen, um die Wetteränderungen zu erhalten. Vielleicht habe ich es nicht sehr klar erklärt. Im Internet gibt es zwei bessere Bilder.

Oben finden Sie eine ausführliche Erläuterung des Beobachtermodus, beginnend mit der Wertübergabe von Vue-Komponenten. Weitere Informationen zum Beobachtermodus, beginnend mit der Wertübergabe von Vue-Komponenten, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!