参照
目標
Vue を理解し、手動でメソッドを作成し、応答性を実装し、応答性を理解する
ソースコード
class MyRef {
constructor(value) {
this._value = value
}
// 访问器
get value() {
console.log('触发 getter 函数 访问');
return this._value
}
// 读取器
set value(newVal) {
console.log('触发 setter 函数 修改');
this._value = newVal
}
}
const c1 = new MyRef(20)
console.log("c1:", c1);
setTimeout(() => {
c1.value = 30
console.log("c1:", c1);
}, 3000);
分析する
1. レスポンシブ対応
クラス class をカスタマイズし、コンストラクターと get、クラス内のメソッドの設定、依存関係のコレクションの値の取得、および更新のディスパッチを作成しました。
- 初めて定義した応答データを読み取るとき、呼び出されたときのゲッター メソッドの出力は次のようになります。
- 応答データを変更した後、setter メソッドを呼び出します。出力は次のようになります。
2. パブリッシュ-サブスクライバー パターン
次に发布-订阅者パターンを見ていきます
- 1.
パブリッシュ/サブスクライバー モデルは実際には对象间一对多依存関係 (メッセージ ペアを使用) であり、1 つのディスパッチ センターが複数のサブスクライバーに対応します
2. オブジェクト (状態) の状態が変化すると、すべてのサブスクライバーが依存するオブジェクトには状態変化が通知されます。
3. サブスクライバー (Subscriber) は、サブスクライブしたいイベントをディスパッチ センター (イベント チャネル) に登録 (Subscribe) します。
4. パブリッシャー (Publisher) がイベント (Publish Event) を発行すると、ディスパッチ センター。つまり、イベントがトリガーされると、ディスパッチ センターの統合ディスパッチ (火災イベント) サブスクライバがディスパッチ センターの処理コードに登録されます。 - 以下のように理解するのが簡単です。
- 関数を定義します。この関数はパブリッシャーのイベントです。サブスクライバーはパブリッシャーのイベントを直接呼び出します。2 つはカップリングを生成します。2 つの間の関係を分離したい場合は、中間にディスパッチ センターを追加する必要があります。つまり、イベント チャネル (仲介者) です。
- パブリッシュとサブスクライバーのパターンは 1 対多のマッピング関係です。つまり、1 つのパブリッシャーが複数のサブスクライバーに対応します。
- 通常、パブリッシュ/サブスクライバー モードにはメッセージ キュー (配列先入れ先出し) モードがあり、配列内に複数のメソッドがあり、最初に宣言および定義された関数が最初に呼び出されます。
- 最初にメッセージ キューを定義し、次に必要なオブジェクトに従ってサブスクライブします。サブスクライブされた関数の状態が変化すると、オブジェクトはアクティブにトリガーされず、受動的に受信されます。
- 例: 本屋に行ったとき
订阅书籍（on）、在庫がない場合は連絡先を残し、在庫があれば店員が发射（emit）ユーザーにメッセージを送り、消息队列（message）本の購入を促します。off - 練習する：
- WebSocketで長時間接続する
- addEventListener イベントは 2 つのイベント A とイベント B にバインドされており、マウスをクリックすると状態が変化します。状態が変化した場合、イベント キューに従ってイベント A とイベント B を連続して実行する必要があります。
3. データハイジャックを実行する
反応的な
ソースコード
参照データ型 (オブジェクト、配列) の定義が reactive によって定義されていることは誰もが知っています。ref を使用して定義すると、Vue は最下層で変換を実行して、ref によって定義されたデータを reactive に変換します。以下は reactive、ref です。 、shallowRef で定義された 3 種類のデータの出力結果は次のとおりです。
const arr1 = reactive([1, 2, 3])
console.log('arr1: ', arr1);
const arr2 = ref([1, 2, 3])
console.log('arr2: ', arr2);
const arr3 = shallowRef([1, 2, 3])
console.log('arr3: ', arr3);
分析する
ref で定義された配列を使用すると、システムはリアクティブになります。Vue のソース コードを見ると、レスポンシブ データを定義するときに判断が行われることがわかります。渡された ref が参照データ型の場合、リアクティブに変換されますこの状況を回避したい場合は、それを使用できますshallowRefが、shallowRefを使用して変更する場合、変更された値は応答しますが、値の属性の変更は応答しません。
