vue のデータ駆動原理とは何ですか

vue のデータ駆動原理は、データ ハイジャックをパブリッシャー モデルとサブスクライバー モデルと組み合わせて使用​​し、「Object.defineProperty()」を使用して各プロパティのセッターとゲッターをハイジャックし、メッセージをサブスクライバーにパブリッシュすることです。データが変更されると、対応するリスニング コールバックがトリガーされます。

#この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue のデータドリブンの原則とは何ですか

データドリブンとは

データドリブンが最大のものですvue.jsの機能。 vue.js におけるいわゆるデータドリブンとは、データが変更されると、それに応じてユーザー インターフェイスが変更され、開発者が手動で DOM を変更する必要がないことを意味します。

たとえば、ボタンをクリックすると、要素のテキストを「はい」と「いいえ」の間で切り替える必要があります。 jquery ではページを変更する際、ボタンにイベントをバインドし、コピーに対応する要素 dom オブジェクトを取得し、スイッチに応じて dom オブジェクトのコピー値を変更するという流れが一般的です。

では、vuejs はどのようにしてこの種のデータドライブを実現するのでしょうか?

Vue は、主にパブリッシャー/サブスクライバー モデルと組み合わせたデータ ハイジャックを使用し、Object.defineProperty() を通じて各プロパティのセッターとゲッターをハイジャックすることにより、双方向のデータ バインディングを実装します。変更が行われると、メッセージがサブスクライバーにパブリッシュされ、対応するリスニング コールバックがトリガーされます。

通常の Javascript オブジェクトがデータ オプションとして Vue インスタンスに渡されると、Vue はそのプロパティを反復処理し、Object.defineProperty を使用してプロパティをゲッター/セッターに変換します。ゲッター/セッターはユーザーには表示されませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされ変更されたときに変更を通知することができます。

Vue の双方向データ バインディングは、データ バインディングの入り口として MVVM を使用し、オブザーバー、コンパイル、ウォッチャーを統合し、オブザーバーを使用して独自のモデルのデータ変更を監視し、コンパイルを使用してテンプレート命令を解析およびコンパイルします ( vue は {unknown{}}) を解析するために使用され、最後にウォッチャーを使用してオブザーバーとコンパイルの間の通信ブリッジを構築し、データ変更を実現します -> 更新を表示します; インタラクティブな変更 (入力) を表示します -> データ モデル変更 双方向バインディング効果。

ゲッター/セッターについて理解していますか?

Vue インスタンスの下のデータ オブジェクトの属性を出力する場合、各属性には 2 つの対応する get メソッドと set メソッドがあります。名前が示すように、get は値であり、set は値です。通常、代入には obj.prop を使用して値を取得して代入しますが、これには問題があります。オブジェクトの値が変更されたことをどのように確認すればよいでしょうか?ということで、セットの出番です。 get と set は関数として理解できます。オブジェクトのプロパティを呼び出すときは、get.property(){...} と入力して、まずオブジェクトにこのプロパティがあるかどうかを確認します。ない場合は、name プロパティを追加します。そしてそれに値を割り当てます。name 属性がある場合は、name 属性を返します。 get は値を受け取る関数と考えることができ、関数の戻り値は関数が取得した値です。もっと重要だと思うのは set 属性です インスタンスに値を代入する場合: このとき set name(val){...} となります; 仮パラメータ val は name 属性に代入した値です. この機能では双方向バインディングなど色々な事が出来ます！この値の変更はすべて set を通過する必要があるため、ユニバーサル リスナーに相当する他のメソッドでは変更できません。 ES5 オブジェクト プロトタイプには、get と set をオブジェクトにバインドするために特別に使用される 2 つの新しい属性 __defineGetter__ と __defineSetter__ があります。以下の方法はプロトタイプに記述されており、継承して再利用できるのでおすすめです。

[関連する推奨事項:「

vue.js チュートリアル 」]

以上がvue のデータ駆動原理とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。