まず、 MVVM とは何かという概念を理解する必要があります。
MVVM:
M: データ モデル層。データ処理を担当します。
V: ビュー レイヤ、ディスプレイ ビュー。
VM: 双方向バインディングを含むビュー モデル レイヤー。
入力ボックスの変更 - データの変更。view=>data
データ変更 - ノード変更。data=>view
2. 双方向バインディングの基本原理の概要:
メソッド: データ ハイジャック Object.defineProperty とパブリッシュ/サブスクライブ モードによる。
ここで名詞が関係していますが、データハイジャックとは何ですか? 一言で言えば、データにモニタリングを追加し、データが変化したら、ビュー操作を変更するプロセスを実行します。
簡潔版の要約① : Object.defineProperty を通じてデータの変更を監視し、サブスクライバー (ウォッチャー) に通知し、サブスクライバーは応答コールバックをトリガーします。
簡潔版の補足説明② : リスナー Observer を通じてプロパティの変更を監視 - Object.defineProperty() を使用し、サブスクライバー Dep を通じてサブスクライバーに通知します。サブスクライバー Dep はリスナーの変更をサブスクライブし、更新をトリガーします。変更が発生したときにパーサーがコンパイルする関数。
補足版まとめ③: vueのソースコードにはdefineReactive()というコアメソッドがあり、非検出を検出に変換します。特定のロジック:リスナー オブザーバーによる Object.defineProperty() データ ハイジャックを通じて、各状態データがハイジャックされ、オブジェクトが走査され、各プロパティにセッターとゲッターが追加されます。したがって、値を割り当てると、セッターはリッスンします。同時に、加入者 Dep を作成し、加入者ウォッチャーを各依存関係に追加します。このようにして、データが変更されると、対応するセッターがトリガーされ、Dep が各サブスクライバー ウォッチャーに通知する通知を発行し、ウォッチャーが対応するデータを更新します。つまり、パーサーのコンパイルで更新関数をトリガーします。
具体的な手順:
1. リスナー オブザーバーを実装します- Object.defineProperty() を使用してプロパティの変更を監視します。(Object.defineProperty() を使用して、セッターとゲッターをプロパティに追加します。この方法で、割り当てが変更されると、セッターがトリガーされ、それをリッスンします) 2. パーサーを実装します。 コンパイル - Vue テンプレート命令を解析し、更新をバインドし
ます。関数。データを監視するサブスクライバーを追加します。データが変更されたら、update 関数を呼び出してデータを更新します。
3. サブスクライバー ウォッチャーの実装- オブザーバーのプロパティ変更をサブスクライブし、変更が発生すると、パーサーのコンパイルで対応する更新関数をトリガーします。
4. サブスクライバ Dep を実装します。変更があった場合にサブスクライバに通知します。サブスクライバを収集し、リスナーとサブスクライバを統合的に管理するために使用されます。
参考までに、インターネットで見つけた非常に鮮明な写真を添付します。