Vue双方向データバインディング（MVM）の原理
2282 ワード
MVVM
MVMはModel-View-View Modelの略語であり、フロントエンドに基づいて開発されたアーキテクチャモードであり、コアはViewとView Modelの双方向データバインディングを提供することであり、これによりView Modelの状態が自動的にViewに伝達されるようになります。
Vue.jsはMVVMスタイルの双方向データ結合を提供するJavascriptライブラリで、View層に集中しています。その核心はMVVMのVM、つまりView Modelです。View ModelはViewとModelを接続し、ビューとデータの整合性を保証します。このような軽量級のアーキテクチャは先端の開発をより効率的で便利にします。
データハイジャック
vue.jsはデータハイジャック結合リリース者-購読者モードを採用して、Object.definePropertyを通じて各属性のsetterをハイジャックし、getterはデータ変動時に購読者にメッセージを発表し、相応の傍受フィードバックをトリガする。
Object.defineProperty()
Object.defineProperty()メソッドは、オブジェクトに直接新しい属性を定義したり、オブジェクトの既存の属性を変更したりして、このオブジェクトに戻ります。
Object.defineProperty（obj，prop，descriptor）
パラメータ: obj――属性を定義する対象。 prop--定義または変更する属性の名前。 descriptor-定義または修正される属性記述子。 戻り値:関数に渡されるオブジェクトです。
MVVMのデータ双方向バインディングステップ
1、データモニターObserverを実現し、データオブジェクトのすべての属性をモニターすることができます。変動があれば最新の値を入手して、購読者に通知します。
2、命令解析器Compleを実現し、各要素ノードの命令をスキャンして解析し、コマンドテンプレートに従ってデータを置換し、対応する更新関数をバインドする。
3、Watchを実現し、ObserverとCompleを接続するブリッジとして、属性ごとの変動の通知を購読して受信し、コマンドバインディングの対応するコール機能を実行して、ビューを更新することができます。
4、MVVM入口関数は、以上の3つを整合する。
流れは以下の通りです。
Observerを実現
私たちはObeject.definePropertyを利用して属性変動を監督することができることを知っています。そうすると、observeのデータオブジェクトを再帰的に巡回する必要があります。サブ属性オブジェクトの属性を含めて、setterとgetterを加えます。
このようにすると、この対象のある値に値を付けると、setterが触発され、データの変化を傍受することができます。
Compleを実現
compleは主にテンプレートコマンドを解析して、テンプレートの変数をデータに置き換えて、レンダリングページビューを初期化し、各コマンドに対応するノードをバインドして更新関数を更新し、モニターデータの購読者を追加します。データが変更されたら、通知を受けます。
Watchを実現
Watch購読者はObserverとCompleの間の通信の架け橋として、主にやっていることは：
1、自身のインスタンス化時に属性購読器（dep）に自分を追加する
2、自分自身にアップロードの方法が必要です。
3、属性変動dep.notice（）の通知を待っている時に、自分のupadate（）の方法を呼び出して、Compleに結合されたフィードバックを触発すると、功成り身を退く。
MVVM実現
MVMはデータバインディングの入口として、Observer、Comple、Watchの3つを統合し、Observerを通じて自分のmodelデータの変化をモニターし、Compleを通じてテンプレートコマンドを解析し、最終的にはWatchを利用してObserverとCompleの間の通信橋を持ち上げます。
データの変化に達する->ビューの更新;ビューのインタラクティブ変化（input）->データmodelの変更による双方向バインディング効果です。
以上がVue双方向データバインディング（MVM）の原理の詳細です。Vue双方向データバインディング（MVM）に関する資料は他の関連記事に注目してください。
MVMはModel-View-View Modelの略語であり、フロントエンドに基づいて開発されたアーキテクチャモードであり、コアはViewとView Modelの双方向データバインディングを提供することであり、これによりView Modelの状態が自動的にViewに伝達されるようになります。
Vue.jsはMVVMスタイルの双方向データ結合を提供するJavascriptライブラリで、View層に集中しています。その核心はMVVMのVM、つまりView Modelです。View ModelはViewとModelを接続し、ビューとデータの整合性を保証します。このような軽量級のアーキテクチャは先端の開発をより効率的で便利にします。
データハイジャック
vue.jsはデータハイジャック結合リリース者-購読者モードを採用して、Object.definePropertyを通じて各属性のsetterをハイジャックし、getterはデータ変動時に購読者にメッセージを発表し、相応の傍受フィードバックをトリガする。
Object.defineProperty()
Object.defineProperty()メソッドは、オブジェクトに直接新しい属性を定義したり、オブジェクトの既存の属性を変更したりして、このオブジェクトに戻ります。
Object.defineProperty（obj，prop，descriptor）
パラメータ:
MVVMのデータ双方向バインディングステップ
1、データモニターObserverを実現し、データオブジェクトのすべての属性をモニターすることができます。変動があれば最新の値を入手して、購読者に通知します。
2、命令解析器Compleを実現し、各要素ノードの命令をスキャンして解析し、コマンドテンプレートに従ってデータを置換し、対応する更新関数をバインドする。
3、Watchを実現し、ObserverとCompleを接続するブリッジとして、属性ごとの変動の通知を購読して受信し、コマンドバインディングの対応するコール機能を実行して、ビューを更新することができます。
4、MVVM入口関数は、以上の3つを整合する。
流れは以下の通りです。
Observerを実現
私たちはObeject.definePropertyを利用して属性変動を監督することができることを知っています。そうすると、observeのデータオブジェクトを再帰的に巡回する必要があります。サブ属性オブジェクトの属性を含めて、setterとgetterを加えます。
このようにすると、この対象のある値に値を付けると、setterが触発され、データの変化を傍受することができます。
Compleを実現
compleは主にテンプレートコマンドを解析して、テンプレートの変数をデータに置き換えて、レンダリングページビューを初期化し、各コマンドに対応するノードをバインドして更新関数を更新し、モニターデータの購読者を追加します。データが変更されたら、通知を受けます。
Watchを実現
Watch購読者はObserverとCompleの間の通信の架け橋として、主にやっていることは：
1、自身のインスタンス化時に属性購読器（dep）に自分を追加する
2、自分自身にアップロードの方法が必要です。
3、属性変動dep.notice（）の通知を待っている時に、自分のupadate（）の方法を呼び出して、Compleに結合されたフィードバックを触発すると、功成り身を退く。
MVVM実現
MVMはデータバインディングの入口として、Observer、Comple、Watchの3つを統合し、Observerを通じて自分のmodelデータの変化をモニターし、Compleを通じてテンプレートコマンドを解析し、最終的にはWatchを利用してObserverとCompleの間の通信橋を持ち上げます。
データの変化に達する->ビューの更新;ビューのインタラクティブ変化（input）->データmodelの変更による双方向バインディング効果です。
以上がVue双方向データバインディング（MVM）の原理の詳細です。Vue双方向データバインディング（MVM）に関する資料は他の関連記事に注目してください。