vueのコンポーネントから値を伝って観察者モードに着手する。

4955 ワード
vue 伝値 観察者
観察者モード
まず、観察者モードというと、MVVM、MVMのアーキテクチャパターン感覚が観察者の思想を使用していると思われます。
私達はやはり慣例に従って、観察者モードとは何かを調べてみます。
観察者モードは、定期購読モードのように、この動作を完了するには、まず少なくとも2つの異なるオブジェクト、または複数のオブジェクトが必要です。彼は1つのチームの多くの依存関係、つまり1つのオブジェクトの状態が変化し、すべてのオブジェクトの状態が変化します。例えば、友達の輪という機能は、一人で百人以上の友達がいるかもしれません。友達の輪を発表したら、私と友達になったすべての人がこの友達の輪を見ます。他の人に褒められたら、あなたの友達も他のいい友達も知らせを受けます。これは観察者に似ています。つまり私は発表者です。私の友達は予約者です。
Vue伝値
そして私たちが見ているのはvueです。vueの原理はみんな知っています。彼は底から上に向けての深い応答式の双方向結合モードです。すなわちMVMです。vueはmodelの変化に注目して、modelの変化はmvmフレームをdomに更新させて、ビュービュービュービュービューの変化を生みます。
一つの項目でよく見られる例を挙げます。
vueのプロジェクトを書く時、私達はすべて親子のコンポーネントを使って値を伝えましたが、兄弟のコンポーネントの伝値はどうやって実現しましたか？まず私達はvuexを使うことができます。これはよくあります。しかし、あなたが使ったことがあるかどうかは分かりません。Bussです。このBussは名前だけです。大丈夫です。飛行機の大砲を呼んでもいいです。これは重要ではないです。私たちは主に彼がどのように実現しているかを見ます。
第一歩は、まずメールでbusを登録します。

Vue.prototype.$Bus = new Vue()
私たちはvueのプロトタイプにグローバル変数$Bussを登録しました。彼の値はvueの実例です。つまり、今までのところ、$Bussの中にvueの属性と方法が全部あります。これで操作できます。
二番目にメッセージを送り始めました。
これは観察者モードのリリース購読モードにぴったりです。
私たちはコンポーネント1に下記のコードを書きます。

<template>
    <div>
        <button @click="send">  </button>
    </div>
</template>

<script>
export default {
    methods: {
        send () {
            this.$Bus.$emit("send",'     ')
        }
    }
}
</script>
ボタンをクリックしてメッセージを送ります。このボタンは投稿者として機能します。私達はvueのemitというアプリを使っていますが、予約者は何ですか？言わないなら、あなたも考えてください。そうです。彼です。
第3のステップは、コンポーネント3においてメッセージを受信する。

<template>
    <div>
        {{message}}
    </div>
</template>

<script>
export default {
    data () {
        return {
            message: ''
        }
    },
    mounted () {
        this.$Bus.$on('send', (msg) => {
            this.message = msg
        })
    }
}
</script>
つまり$onという属性を受信者として使っています。
上から見ると、vueは多くのところで観察者の思想を使っています。彼の双方向結合も含めて同じです。
vueの仕組み

上の図から見れば、vueはObject.definePropertyを通じてデータのハイジャックを実現し、そして中間で乗り換えをして、最後にvue層にレンダリングされています。
確かに、vue.jsは観察者モードを参考にしましたが、観察者モードと重視しているのはイベント駆動です。例えば、私が家を買うという動作は初めてで、販売と適切な住宅源がないかもしれません。そして販売はあなたに言います。新しい不動産源がある時、彼はあなたに電話してお知らせします。この一連の根源は家を買うということです。彼は一連の流れを駆動しました。vueはデータ駆動ということを知っています。つまり、dataの中の値だけが変わったら、Object.definePropertyが彼にハイジャックしてdomを更新して、ビューの更新を触発します。
もっと観察者のパターンの特徴に合うものがありますか？
もちろんnode.jsのイベントです。
まず、eventsの仕事の流れを見ます。

var events = require('events');
//    eventEmitter   
var eventEmitter = new events.EventEmitter();
//         
var connectHandler = function connected() {
   console.log('    。');
   //    data_received    
   eventEmitter.emit('data_received');
}
//    connection       
eventEmitter.on('connection', connectHandler);
//          data_received   
eventEmitter.on('data_received', function(){
   console.log('      。');
});
//    connection    
eventEmitter.emit('connection');
console.log("      。");
出力してください:

これは完全に観察者の動作モードに合致しています。emitから発表され、onから受信します。だから、node.jsはとても良い傍受の構造を提供して、彼の全体の事務に対する処理がまだあります。これはnodejsの最も特色のあるI/Oモードをサポートしています。例えば、httpサービスを起動する時に、そのconnect/close、http.requestを監督してdata/endなどを傍受します。
似たようなケースがありますか？
もちろん、jsには事件の傍受者であるaddEventListenerがいます。観察者の意味もあります。具体的な使い方は言いません。皆さんはよく知っていると思います。
考えてみれば、やはり観察者の姿があるところが多いです。一番簡単なのはクリックイベントという意味ですか？発表者はボタンです。受取人はフォーム、弾層など何でもいいです。
観察者モードの存在意義
まず彼の長所を説明します。
1，観察者モードは観察者と観察者との間に結合を確立する必要があり、彼はより抽象化して両者を結びつける必要がある。
2，観察者モードは放送を支持して、つまり1対の多い関係、これは私達に1つの技術を思い付きやすくて、socketで、具体的にvueプロジェクトを参考にしてwebsocket技術を使うことができます。
ガチョウも長所短所です。
1，購読者を創建する自身は一定の時間とメモリを消費します。
2，メッセージを購読する時、このメッセージは発生していないかもしれませんが、この購読者は常にメモリに存在します。
3，観察者モードが対象間の連絡を弱体化させるのは良いことですが、過度に使用すると、対象と対象との連絡も深く隠れてしまい、プロジェクトのフォローアップが難しくなります。
ちょっと待ってください。もう一つのモードは発表購読モードといいます。彼は観察者モードだと思っていますが、ネットで調べたら違いがあります。観察者モードと発表購読モードは似ていますが、本質はやはり違います。根本的なのはスケジュールセンターが違います。
例を挙げると、観察者モードは目標と観察者が抽象的なタイプで、例えば天気予報、観察者Aは天気の変化を監督しています。Bは天気の変化を知りたいなら、自分をAに登録する必要があります。天気が変わる時、Aは天気の変化を触発して、Bの接続口の更新の変化をスケジュールします。
購読モードをリリースするにはどうやってこの動作を完了しますか？A天気の変化を感知するにはBというスケジュールセンターが必要ですが、Bは天気の変化を得るにはCに依存する触発が必要です。私が説明したのはよく分からないかもしれません。ネット上には二つの図があります。


以上は、vueのコンポーネントの値から観察者モードの詳細な内容を説明しました。vueのコンポーネントから観察者モードのデータを転送します。他の関連記事に注目してください。