Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明

オブザーバーパターン

まず、オブザーバーパターンについて言及すると、MVVMを思い出します。MVVMアーキテクチャパターンは、オブザーバーの考え方を使用するようです。

慣例に従って、オブザーバーモードとは何かを理解しましょう。

オブザーバーパターンは、パブリッシュサブスクライブパターンに似ています。このアクションを完了するには、少なくとも 2 つの異なるオブジェクト、または複数のオブジェクトが必要です。これは、1 対多の依存関係に似ています。つまり、1 つのオブジェクトの状態が変化すると、関連するすべてのオブジェクトの状態が変化します。たとえば、モーメント機能では、ある人物に何百人もの友人がいる場合があります。私がモーメント投稿を投稿すると、すべての友人がそれを見ることになります。別の人がそれを「いいね」すると、それを「いいね」したすべての友人にも通知が届きます。これはオブザーバーに非常に似ています。つまり、私がパブリッシャーで、友人がサブスクライバーです。

Vue パス値

それでは、Vue とは何かを見てみましょう。Vue の原理は誰もが知っています。Vue はボトムアップで、応答性が高く、双方向バインディングモード、つまり MVVM です。つまり、Vue はモデルの変更に注意を払います。モデルの変更により、MVVM フレームワークは DOM を更新し、ビューの変更を生成できます。

以下はプロジェクトにおける一般的な例です。

Vue プロジェクトの作成では、親子コンポーネントの値転送を使用しましたが、兄弟コンポーネントの値転送を実装するにはどうすればよいでしょうか。まず、非常に一般的な Vuex を使用できますが、使用したことがあるかどうかはわかりませんが、別の方法があります。それは Bus です。この Bus は単なる名前です。何と呼ぶかは問題ではありません。飛行機と呼ぶことも、大砲と呼ぶこともできます。どちらでもかまいません。主に実装方法を見てみましょう。

最初のステップは、main.jsにバスを登録することです。

Vue.prototype.$Bus = 新しいVue()

vue のプロトタイプにグローバル変数 $Bus を登録しました。その値は vue のインスタンスです。つまり、ここまでで $Bus には vue のすべてのプロパティとメソッドが含まれているため、操作が簡単になりました。

2番目のステップでは、メッセージを送信し始めます

これは、オブザーバーパターンのパブリッシュ/サブスクライブモデルと一致しています。

コンポーネント 1 に次のコードを記述します。

<テンプレート>
    <div>
        <button @click="send">送信</button>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    メソッド: {
        送信 （） {
            this.$Bus.$emit("send",'受信した情報')
        }
    }
}
</スクリプト>

メッセージを送信するには、ボタンをクリックします。このボタンはパブリッシャーとして機能します。vue の $emit API を使用するので、サブスクライバーとは何でしょうか。言わなくても、あなたは推測できたはずです。そうです、彼です。

ステップ3: コンポーネント3でメッセージを受信する

<テンプレート>
    <div>
        {{メッセージ}}
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    データ （） {
        戻る {
            メッセージ： ''
        }
    },
    マウントされた（）{
        this.$Bus.$on('send', (msg) => {
            this.message = メッセージ
        })
    }
}
</スクリプト>

$on属性をレシーバーとして使用する

上記からわかるように、Vue は双方向バインディングを含め、多くの場所でオブザーバーの概念を使用しています。

Vueの仕組み

上の図から、vue が Object.defineProperty を通じてデータをハイジャックし、中間で転送を行い、最終的に vue レイヤーにレンダリングしていることがわかります。

確かなのは、vue.js がオブザーバーパターンを借用したということですが、それでも少し違いがあると感じています。オブザーバーパターンはイベント駆動に重点を置いています。たとえば、家を購入するときに、最初に営業担当者に相談したときには適切な家がない場合があります。すると、営業担当者は「適切な家があれば、できるだけ早くお知らせします」と言います。新しい家があると、彼はあなたに電話して知らせます。この一連の流れの根底にあるのは、家を購入するというイベントであり、それがプロセス全体を駆動します。ご存知のとおり、Vue はデータ駆動型です。つまり、データ内の値が変更された場合にのみ、Object.defineProperty がそれをハイジャックして DOM を更新し、ビューの更新をトリガーします。

では、オブザーバーパターンの特性にもっと一致するものはあるでしょうか?

もちろん、これは node.js イベントです。

まず、イベントのワークフローを見てみましょう。

var イベント = require('イベント');
//eventEmitter オブジェクトを作成します。var eventEmitter = new events.EventEmitter();
// イベントハンドラを作成する var connectHandler = function connected() {
   console.log('接続に成功しました。');
   // data_received イベントをトリガーします。eventEmitter.emit('data_received');
}
// 接続イベント ハンドラーをバインドします。eventEmitter.on('connection', connectHandler);
// 匿名関数を使用して data_received イベントをバインドします eventEmitter.on('data_received', function(){
   console.log('データを正常に受信しました。');
});
//接続イベントをトリガーする eventEmitter.emit('connection');
console.log("プログラムの実行が完了しました。");

出力：

これは、emit によって公開され、on によって受信されるオブザーバーの動作モードと完全に一致しています。したがって、node.js は優れた監視メカニズムを提供し、トランザクション全体を処理します。これは、Node.js の最も特徴的な I/O モードをサポートします。たとえば、http サービスを開始すると、その connect/close をリッスンし、http.request を使用すると、data/end などをリッスンします。

同様の事例はありますか？

もちろん、js にはイベントリスナー ---- addEventListener があり、これはオブザーバーの意味も持っています。その使い方の詳細については説明しませんが、皆さんもよくご存知だと思います。

実は、よくよく考えてみると、オブザーバーが存在する場所はまだまだたくさんあります。一番シンプルなのはクリックイベントです。これも意味があるのではないでしょうか。パブリッシャーはボタンで、レシーバーはフォームでもポップアップレイヤーでも何でも構いません。

観察モードの重要性

まず、その利点についてお話ししましょう。

1. オブザーバーパターンでは、オブザーバーと観察対象の間の結合が必要です。この 2 つを接続するには、より抽象的な方法が必要です。

2. オブザーバーモードは、1対多の関係であるブロードキャストをサポートしています。これにより、ソケットという技術を簡単に考えることができます。詳細については、WebSocket技術を使用したvueプロジェクトを参照してください。

しかし、彼には長所と短所もあります。

1. サブスクライバーの作成には、一定の時間とメモリが消費されます。

2. メッセージをサブスクライブする場合、メッセージは発生していない可能性がありますが、サブスクライバーは常にメモリ内に存在します。

3. オブザーバーパターンはオブジェクト間の接続を弱めますが、これは良いことです。ただし、過度に使用すると、オブジェクト間の接続が非常に深く隠され、プロジェクトの追跡、保守、理解が困難になります。

待ってください、パブリッシュサブスクライブモデルと呼ばれる別のモデルがあります。多くの人はそれをオブザーバーモデルだと思っています (私も含めて)。後でインターネットで調べたところ、それらはまだ異なることがわかりました。オブザーバーモデルはパブリッシュサブスクライブモデルと非常によく似ており、本当に似ていますが、本質的にはまだいくつかの違いがあります。最も基本的な違いは、スケジューリングセンターです。

たとえば、オブザーバーパターンは、ターゲットとオブザーバーが抽象クラスであることに重点を置いています。たとえば、天気予報では、オブザーバー A は天気の変化を監視する役割を担っており、B が天気の変化を知りたい場合は、自身を A に登録する必要があります。天気が変化すると、A は天気の変化をトリガーし、B のインターフェイスが変化を更新するようにスケジュールします。

パブリッシュ/サブスクライブモデルはこれをどのように実現するのでしょうか? A が天候の変化を感知したい場合、B (ディスパッチセンター) が必要で、B は天候の変化を取得するために C のトリガーに頼る必要があります。あまり明確に説明できなかったかもしれません。インターネットにもっとわかりやすい写真が 2 つあります。