vue、angular、react を使用して双方向データ バインディングを実装する方法

この記事は主に、vue、angular、react データの双方向バインディング原則の簡単な分析を紹介しています。編集者はそれが非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

従来の方法

フロントエンドのメンテナンス状況、DOMを手動で操作してビューを更新します。フロントエンド フレームワークは、テンプレートを通じてサーバー データをレンダリングします。ユーザーがアクションを実行すると、document.getElementBy... を通じて DOM を手動で更新します。
フレームワークはデータとビューを分離するのに役立ちます。フレームワークは初回のみレンダリングし、ステータス監視の変更を追跡しないため、後続のステータス更新には DOM の手動操作が必要です。

双方向データバインディング

フロントエンド開発で MV* モデルを採用する場合、M - モデルはデータであるモデルを指し、V - ビューはビューを指します。ページには一部が表示されます。通常、サーバーから取得したデータを「レンダリング」してビューに表示するコードを記述する必要があります。データが変更されるたびに、ビューがデータと一致するように、再度レンダリングしてビューを更新します。

このページでは、ユーザーの操作を通じてステータスとデータの変更も生成されます。このとき、ビューのデータの更新をバックエンド サーバーに同期するコードを作成します。つまり、

フロントエンド MV* フレームワークが異なれば、Model と View 間のデータ同期の処理方法も異なります。 Backbone では、Model から View にデータを転送するときに、Model が更新されるたびに View で Model の変更イベントをリッスンすることができ、View でレンダリングが再実行されます。ビューからモデルへのデータ転送では、ビューに対応する DOM 要素のさまざまなイベントを監視できます。ビューの状態の変化を検出した後、変更されたデータが (両側のリッスン イベントを通じて) モデルに送信されます。 Backbone と比較して、AngularJS で表される MVVM フレームワークはさらに一歩進んで、このデータ同期メカニズムをフレームワーク レベルからサポートしており、双方向のデータ バインディングです。

さまざまな MVVM フレームワークでは、双方向のデータ バインディングは次のとおりです。導入されたテクノロジーは違いを生みます。

AngularJS は「ダーティ値検出」メソッドを採用しており、データが変更された後、すべてのデータとビューの間のバインディング関係を検出して、データが変更されたかどうかを識別します。これにより、他のデータがさらに変更される可能性があります。破損しているため、このプロセスはデータの変更がなくなるまで数回繰り返され、変更されたデータがビューに送信され、ページが更新されます。 ViewModel のデータが手動で変更された場合、その変更がビューに確実に同期されるようにするには、「ダーティ値の検出」を手動でトリガーする必要があります。

VueJS は、ES5 が提供する Object.defineProperty() メソッドを使用してデータの操作を監視し、データ同期を自動的にトリガーします。さらに、同期は異なるデータに対してトリガーされるため、すべてのデータに対してテストを実行するのではなく、変更をバインドされたビューに正確に送信できます。

Vue 双方向データ バインディングは、データとビューの

バインディングと同期を実装します。これは最終的にデータの読み取りと書き込みのプロセス、つまり Object.defineProperty( で定義されたデータ セットと取得関数) に反映されます。 ）。 Vue の関数は、defineReactive です。実装の簡素化されたバージョンでは、いくつかの基本的な機能のみを保持しました。

  function defineReactive(obj, key, value){
    var dep = new Dep();
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactGetter(){
        if(Dep.target){
          dep.depend();
        }
        return value;
      },
      set: function reactSetter(newVal){
        if (value === newVal) {
          return;
        } else {
          value = newVal;
          //如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）
          dep.notify();
        }
      }
    })
  }

データを読み取るとき、現在ウォッチャー (データのオブザーバー) が存在する場合、ウォッチャーはデータを取得する責任があります。新しいデータがビューに送信され)、その後ウォッチャーが現在のデータにバインドされます (dep.depend()、dep は現在のデータをすべてのウォッチャーの依存関係に関連付けます)。これは、依存関係を確認して記録するプロセスです。データを割り当てるときに、データが変更されると、すべてのウォッチャーに通知されます (dep.notify() を使用)。このようにして、データを手動で変更した場合でも、フレームワークはデータをビューに自動的に同期できます。

データバインディング関係の識別プロセス

VueとAngularJSでは、HTMLに命令を追加することでビュー要素とデータ間のバインディング関係を宣言します

  <form id="test">
    <input type="text" v-model="name">
  </form>

上記のHTMLコードは入力を表します 要素は名前にバインドされますデータ。 JS コードで次のように初期化できます:

  var vm = new Vue({
   el: '#test',
   data: {
    name: 'sysuzhyupeng'
   }
  })

コードが正しく実行されると、ページ上の入力要素に対応する位置に、上記のコードで指定された初期値 sysuzhyupeng が表示されます。

vm.name = ‘zhyupeng’ を実行すると、ページ上の入力も更新されて次のように表示されます: zhyupeng。ページのテキスト ボックスのコンテンツを yupeng に変更すると、vm.name を通じて取得される値は 'yupeng' になります

React データ バインディング

React は、仮想 DOM ツリーの更新を考慮して次のメソッドを使用します:

1. プロパティの更新はコンポーネント自体によって処理されます

2. 構造を更新し、サブツリー (仮想 DOM) を再レンダリングし、最小限の変更手順を見つけて、DOM 操作をパッケージ化し、実際の DOM ツリーにパッチを適用します

純粋にデータ バインディングの観点から見ると、React 仮想 DOM はデータバインディングはありません。 setState() は以前の状態を維持しない (状態は破棄される) ため、バインディングはありません

データ更新メカニズムの観点から見ると、React はデータ モデルを提供する方法と似ています (更新する必要があります)スルー状態)

双方向データがありません。バインドする場合、双方向入力シナリオを実装するにはどうすればよいですか?フレームワークが提供する API を介して、データ変更を手動で通知する方法は、DOM を操作する方法と非常に似ています

以上が、皆様の今後の参考になれば幸いです。

関連記事:

JSでクロス座標追従マウスエフェクトを実装する方法

jQueryでEasyUIウィンドウを使用する方法

Angular4.0でlaydate.js日付プラグインを使用する方法

以上がvue、angular、react を使用して双方向データ バインディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。