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