1.MVVM
MVVM は、Model、View、ViewModel の略称で、フロントエンド開発におけるアーキテクチャ パターンです。
- モデル: アプリケーション内のデータとビジネス ロジックを表します。フロントエンド開発では、モデルは通常、データ オブジェクト、API リクエスト、データ処理ロジックを指します。vue の <script> セクションに相当します。
- ビュー (ビュー): ユーザー インターフェイス、つまりユーザーがブラウザーで表示および操作するインターフェイス要素を表します。フロントエンド開発では、通常、ビューは HTML、CSS、および UI コンポーネントを指します。vue の <template> 部分に相当します。
- ViewModel（ビューモデル）：ModelとViewの中間層を接続します。ViewModel は主に、モデル内のデータとビジネス ロジックをビューにマッピングすると同時に、ビュー内でのユーザーの対話を監視し、それを処理のためにモデルにフィードバックします。
MVVM パターンの中核となる考え方はデータ駆動型のビューです。ViewModel は、モデル内のデータをビューにバインドする役割を果たし、データが変更されると、ビューは自動的に更新されます。同時に、View でのユーザーの操作も ViewModel を介して Model にフィードバックされ、データ処理が行われます。つまり、ViewModel は、Model のデータを View に提示し、View でのユーザー操作を監視し、データ処理のために Model にフィードバックする責任があります。
MVVM では、View と ViewModel は分離されており、独立して開発およびテストできます。このモードにより、フロントエンド開発の保守性、テスト性、開発効率が向上します。
2、V モデル
vue では、v-model はフォーム要素 (input、radio など) と vue インスタンス データ間の双方向バインディングを実現するために vue によって提供される命令です。v-model の実装は次のように大まかに要約できます。
-
バインドされたフォーム要素の初期値を取得する: Vue.js はコンパイル段階でテンプレート内の
v-modelディレクティブを解析し、バインドされたフォーム要素の初期値を取得します。 -
バインドされたフォーム要素の入力イベント: Vue.js はバインドされたフォーム要素に入力イベント リスナー ( または
inputなど) を追加しchange、フォーム要素の値が変更されたときに対応するコールバック関数をトリガーします。 -
データ モデルを同期する: フォーム要素の値が変更されると、入力イベント リスナーによってトリガーされるコールバック関数が Vue.js データ モデル内の対応する属性の値を更新し、それによってフォーム要素からフォーム要素へのデータ フローが実現されます。データ・モデル。
-
form 要素の値を更新する: Vue.js データ モデル内の対応する属性の値が変更されると、Vue.js は応答システムを通じてバインドされた form 要素の値を自動的に更新し、それによってデータからのデータ フローを実現します。モデルを form 要素に追加します。
上記の手順により、v-modelform 要素と Vue.js データ モデル間の双方向バインディングが実現され、form 要素の値とデータ モデルの値の同期が保たれます。
これはフォーム要素 ( 、など)v-modelでのみ使用でき、Vue.js データ バインディング構文で使用する必要があることに 注意してください。たとえば、は Vue.js データ モデルの属性です。inputtextareaselectv-model="dataProperty"dataProperty
3、vue 双方向データ バインディング
Vue の双方向バインディングは、主に次の 2 つのコア メカニズムに依存しています。
- データハイジャック: Vue は、オブジェクトの Object.defineProperty メソッドを使用してデータをハイジャックし、データの観察と監視を実現します。データを配置および変更する場合、Vue はこれらの操作をキャプチャし、応答の更新をトリガーできます。
- パブリッシュ/サブスクライブ モード: Vue はパブリッシュ/サブスクライブ モードを使用して、ビュー ビューとモデル モデルの間の双方向のデータ バインディングを管理します。ビュー内のデータが変更されると、vue はサブスクライバー (ウォッチャー) の更新メソッドを自動的にトリガーして、モデル内のデータを更新します。モデル内のデータが変更されると、vue はサブスクライバーの更新メソッドを自動的にトリガーします。 、ビュー内のデータを更新します。
要約する
MVVM は、アプリケーションのデータ、ビュー、ビジネス ロジックを管理するためのフロントエンド開発のアーキテクチャ パターンです。v-model は Vue.js フレームワークのディレクティブであり、vue の双方向データ バインディングを実現するために使用されます。
したがって、v-model は Vue.js の MVVM パターンで双方向のデータバインディングを実現する方法であると言えます。