MVVMアーキテクチャパターンの詳細説明

MVVMとは何ですか?

        MVVM はフロントエンドのアーキテクチャ パターンであり、VUE.JS はこのパターンに基づくフレームワークのセットです。

         (MVVM アーキテクチャにも基づいています: WeChat アプレット、AngularJS、ReactJs)

MVVM は何で構成されていますか?

        MVVM は、Model、View、ViewModel の 3 つの部分で構成されます。

モデル: 簡単に言うと、 JS の変数データ        です。

        ビュー: 簡単に言うと、ページ

        ViewModel: Vue.js のコアです。Vue インスタンスです。2 つのツールがあります。機能は、単に モデルとビューを接続し、DOM とデータの同期を維持することです。それらは次のとおりです:

                DOM リスナー: リスニング ページ上のデータが変更されると、同期的にモデルに更新されます。

                データ バインディング: モデル内のデータが変更されると、ページ上の対応する DOM が再レンダリングされます。

MVVMの役割の概要は?

        MVVM のアーキテクチャ パターンにより、フレームワークはデータ駆動型になります。

MVVMの原理?

パブリッシャー/サブスクライバー パターンと組み合わせたデータ ハイジャックの使用

Vue のインスタンス化中

一方で、SE5 が提供する Object.defineProperty() メソッドを通じて、オブジェクト内のすべてのデータを対応するセッター メソッドとゲッター メソッドに変換します。

一方: ビューを初期化し、Watcher にサブスクライブしてビューを更新すると、Wather 自身がメッセージ サブスクライバー (Dep) に追加され、初期化が完了します。

データが変更されると何が起こるでしょうか?

データが変更されると (セッターがトリガーされると)、オブザーバーのセッター メソッドがトリガーされ、セッターはただちに Dep.notify() を呼び出し、Dep はすべてのサブスクライバーの走査を開始し、サブスクライバーの update メソッドを呼び出します。サブスクライバは通知を受け取ります。それに応じてビューを更新します。

MVVMの考え方は?

DOM のステータス更新により、MVVM アーキテクチャ パターンが自動的に完成し、DOM に対する開発者の操作が軽減されます。

オブザーバー: データ オブジェクトのすべてのプロパティを監視できるデータ リスナーです。変更があった場合、最新の値を取得してサブスクライバーに通知できます。SE5 の Object.defineProperty のゲッターとセッターを使用して内部的に実装されます。

コンパイル: 命令パーサー (v-for、v-if...)。その機能は、各要素ノードの命令をスキャンして解析し、命令テンプレートに従ってデータを置き換え、対応する更新関数をバインドすることです。

ウォッチャー: サブスクライバーは、オブザーバーとコンパイルを接続するブリッジとして、各属性変更の通知をサブスクライブして受信し、命令によってバインドされた対応するコールバック関数を実行できます。

Dep : メッセージ サブスクライバー。サブスクライバー (ウォッチャー) を収集するために内部で配列を維持します。データの変更により通知関数がトリガーされ、サブスクライバーの更新メソッドが呼び出されます。

おすすめ

転載: blog.csdn.net/weixin_43221910/article/details/123346592