Vueの一方向のデータフローと双方向の結合

それ以来VUEは、競合がないその間、その後、一方向のデータフローであるが、MVVMフレームワーク。

単方向データフロー

データフローが状態を指すの方法は、一方向のみから変更することができます。

ここに画像を挿入説明

状態:データ・ソース・ドライブ・アプリケーションに最適です。ビュー:宣言状態は、ビューにマッピングされています。アクション:ビューの状態変化にユーザ入力に応答します。

ウェイデータ・フロー・プロセス:

簡単な方法データフロー(単方向データフロー)は、ユーザーのアクセスビューを指し、ビューアクションは、アクションに対応する状態を更新するために、ユーザーとの対話を発行しました。状態の後、更新プロセスの表示更新ページをトリガーします。このような一方向のデータは常に維持しやすい、明確な流れと予測することができます。

特長:

(1)全ての記録、追跡可能な、容易に追跡可能なソースの状態を変更し、
すべてのデータの(2)一つだけのコピーは、唯一つのデータ構成要素の入口および出口は、アプリケーションの保守に資する、より直感的かつ容易にプログラムが理解するように、あります;
(3)データの変更と、更新ページ(DATA-ページ)に移動し、なく(ページ-data);
ユーザーがページ上の変更を行った場合(4)、次いで手動で収集する(自動双方向)、合併元のデータに。

個々のコンポーネント間のデータフロー:

データ親コンポーネントの小道具は、サブアセンブリに流入することができ、データが親コンポーネントを変更した場合、サブアセンブリは自動的にこの変更されたデータを受信して​​、ページを更新します。

したがって、データは、典型的には、データ親コンポーネントが変更された親コンポーネントによって提供され、サブアセンブリは自動的にそれによってサブアセンブリを更新し、変更データを受信します。

しかし、その逆はない、この変更は、予期せぬ状態は、アプリケーションのデータが得られわかりにくい流れコンポーネントサブアセンブリから親を防ぐことができます。

親がコンポーネントに更新されるたびに、サブアセンブリは、すべての小道具は、最新の値に更新されますされています。あなたがサブアセンブリ内小道具を変更しないことをこれが意味。あなたがこれを行う場合は、Vueのは、ブラウザのコンソールに警告を発行します。

注意:

1、データは一方向のみに結合、サブアセンブリに親コンポーネント(送信)から流れます。

図2に示すように、データ転送は、サブアセンブリ内の親要素に修正されるべきではありません。
ここに画像を挿入説明
利点:

; 1.状態は、容易に追跡可能なソーストラックをすべてのレコードを変更することができる
ので、より直感的かつ容易に、プログラムを理解すること保守アプリケーションを容易にするだけつのデータ構成要素の入口と出口がある、すべてのデータの2コピーを1つだけ、
3データ変更したら、更新ページ(DATA-ページ)に進んではなく(ページ-data);
4.ユーザーがページ上の変更を行う場合は、手動で収集した(双方向自動)、元に組み込まれましたデータ。

短所:

HTMLコードは、レンダリングされて変更することができない、新しいデータがある、あなたが削除されている古いHTMLコードを配置する必要があり、への新たなデータとテンプレートの統合再レンダリング;
コードの量が増加すると、データ転送処理が長くなり、定型コードのような多く、
アプリケーションの状態と同じ時間厳格な要件(シングル、グローバルストア)の独立した管理が、(より「リッチフォーム」アプリケーションをやりとりするために、このようなユーザー入力など)のシーンのより多くのローカライズされた状態を扱うときに、長ったらしいと退屈だと思われます。

VUE双方向結合

MVVMは主にVueの、ビュー、およびViewModelにモデル、モデルビューに三つの部分からなる枠を、達成することであると彼らはミドルウェアのViewModelによって実行されなければならない、直接通信することはできません。VUEデータが基になるデータ層にバインドし、ドム、ビューモデルビュー層の更新通知ビューにバインドされているので、例えば、データは、モデルのセクションを変更し、データの変化もモデルに同期さビュービュー。同期は、ビューとモデルの間に人間DOMなしで完全に自動、手動操作です。
ここに画像を挿入説明
長所

1. Aのユーザは、自動的にデータモデルに同期される修飾は、値の変化が直ちにビューへのデータモデルに同期う見;
それらの関連する操作及び結合2ウェイデータの必要性;
3。フォームよりインタラクティブなシーンの下で、独立した事業の多くは、コードを簡素化します。

短所:

1.はないローカルの状態の変化を追跡します。

2.「秘密の操作」、エラーが発生したときに、デバッグの難しさを増します。

より「制御」とは、子宮出血場合、コンポーネント、データエントリので4つ以上のソース、簡単な障害のデータの流れ方向を変更することが可能となり、欠け。

VUEそれは一方向のデータフローですが、また、MVVMフレームワークので、これらの間には競合が存在しませんか?

すなわち、二人は、簡単にトレースへの単一の使用中のデータの全体的な流れ、相互に排他的ではなく、地域の双方向データが流れ、操作しやすいです。

非UIコントロールのために、双方向の不在、一方向のみ。UIコントロールは、唯一の双方向の問題を抱えています。結合データストリームは、その状態管理を統一複雑なアプリケーション用である、一方向(例えばVuex)前提一方向性です。方法はいくつかの機会に結合リアルタイム応答が(例えばフォームの送信など)、ユーザの入力に非常に便利になりますが必要です。しかし、この便利さは、一般的に複雑なアプリケーションの状態管理によってもたらされるメリットを紹介して劣ると考えられています。

VueのはVモデルの場合、彼は、データとビューの間の結合を達成するために、バインド構文イベントを使用して、シンタックスシュガーです。
Vモデルは、以下のようにコードを理解すべきで(厳密ではありません)

それは本質的にイベントでデータの一方向の流れ結合双方向のデータを達成するために、ユーザーの追加操作です。

双方向バインディングの原則を明確に具現化した後は、双方向の違いは結合見ることができる唯一の双方向バインドフレームの内側に隠されたデータの変更操作で結ばれ、呼び出し側は、直接に知覚されることはありません。

ウェイは、それに応じてデータバインディングの流れが一方向であることを確認、しかし実際には双方向データVuexストリームが、実際には、開発者が明示的に指定する必要があり、グローバルなシングルトンのイベントディスパッチャ(ディスパッチャー)に従事していますこの統一されたデータ変更通知イベントメカニズムを実行して。実際には、UIコントロールの双方向バインディング・フレームワークと、この方法では、同じ方法です。メカニズムの基礎となるすべてのイベント。双方向バインディングのアプリケーションは、我々は我々が管理できるように双方向の背後にある状態の変化は、結合、自動的にUIコントロールにバインドされたデータフレームを変更し、ロジック同様のディスパッチャを追加するためにイベントリスナーやウォッチャーの方法を持っていると仮定して、想像してみてあなたが唯一の収入データの一方向の流れを楽しむことができます。

公開された83元の記事 ウォンの賞賛337 ビュー560 000 +

おすすめ

転載: blog.csdn.net/liuyifeng0000/article/details/104976813