vuejs データドライバーを理解する方法

vuejs におけるデータドリブンとは、データが変更されるとそれに応じてユーザー インターフェイスが変更され、開発者が DOM を手動で変更する必要がないことを意味します。簡単に言えば、データの変更を制御することで DOM を変更します。データの変更に応じてビュー (DOM) のコンテンツを変更できるようにします。

このチュートリアルの動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

1: Vue とは何か、Vue を理解する方法

Vue は、MVVM モードのデータ駆動型ページに基づいたフレームワークであり、データが表示されます。シングルページアプリケーションを実現する技術です。

いくつかの主要な機能の要約:

• シンプル

• 軽量

• 高速

• #データドリブン

• モジュールフレンドリー

# コンポーネントベース
Vue はデータ駆動型の双方向バインディングを利用して、ページの開発を容易にします。開発者は DOM を手動で変更する必要はありません。 Vue は双方向のデータ バインディングを使用してすべてを簡単にします。データ駆動型の双方向バインディングは、Object.defineProperty() で定義されたデータ セットおよび取得関数の原則を通じて実装されます。

2. コンポーネントベースの開発により、プロジェクトのスケーラビリティと移植性が向上し、コードの再利用性が向上します。

3. シングルページのアプリケーション エクスペリエンス。ローカル コンポーネントはインターフェイスを更新して、ユーザー エクスペリエンスを高速化し、時間を節約します。

シングルページ アプリケーション (SPA とも呼ばれます) は、すべてのアクティビティを Web ページに制限し、Web ページの初期化時に対応する HTML、JavaScript、および CSS のみを読み込みます。読み込みが完了すると、ページはリロードしたりジャンプしたりしません。内部のコンポーネントまたはモジュールのみが対話して、ハッシュまたは履歴 API を介してジャンプし、ajax を介してデータを取得して応答関数を実装します。アプリケーション全体は単なる 1 つの HTML であるため、はシングルページと呼ばれます!

4. js コードは目に見えない形で標準化されており、チームワークで開発されたコードは読みやすくなっています。

2: Vue データ駆動型 (双方向データ バインディング) の原理は何ですか?

データドリブンとは

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

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

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

Vue は、主にパブリッシャー/サブスクライバー モデルと組み合わせたデータ ハイジャックを使用し、データ変更時に Object.defineProperty() を使用して各プロパティのセッターとゲッターをハイジャックすることにより、双方向のデータ バインディングを実装します。メッセージをサブスクライバーにパブリッシュし、対応するリスニング コールバックをトリガーします。プレーンな Javascript オブジェクトをデータ オプションとして Vue インスタンスに渡すと、Vue はそのプロパティを反復処理し、Object.defineProperty を使用してプロパティをゲッター/セッターに変換します。ゲッター/セッターはユーザーには表示されませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされ変更されたときに変更を通知することができます。

Vue の双方向データ バインディングは、Observer、Compile、Watcher を統合するデータ バインディングの入り口として MVVM を使用します。Observer を使用して独自のモデルのデータ変更を監視し、Compile を使用してテンプレート命令を解析およびコンパイルします。 (vue は {

{}} の解析に使用されます)、最後にウォッチャーを使用してオブザーバーとコンパイル間の通信ブリッジを構築し、データ変更を実現します -> 更新を表示します; インタラクティブな変更 (入力) を表示します -> 両方のデータ モデルの変更を実現します方向性バインディング効果。

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

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

3: MVVM フレームワーク

Vue.js のデータ ドライバーは、MVVM フレームワークを通じて実装されます。 MVVM フレームワークには主に、モデル、ビュー、ビューモデルの 3 つの部分が含まれています。

• Model: データ部分を指します。JavaScript オブジェクトのフロントエンドに相当します。

• View: ビューを指します。 dom

• Viewmodel のフロントエンドに相当する部分: ビューとデータを接続するミドルウェア通信です

データ (Model) とビュー (View) は直接通信することはできませんが、両者間の通信は ViewModel を通じて実現する必要があります。データが変更されると、viewModel はその変更を監視し、タイムリーに変更を行うようにビューに通知できます。同様に、ページ上でイベントがトリガーされると、viewMODEl はイベントをリッスンし、モデルに応答するよう通知することもできます。 Viewmodel はオブザーバーに相当し、双方のアクションを監視し、対応する操作を実行するよう相手に適時に通知します。

関連する推奨事項:「vue.js チュートリアル 」

以上がvuejs データドライバーを理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。