Vue の単一項目データ フローと双方向データ バインディングを理解します。この 2 つは競合しますか?

この記事では、vue の単一データ フローと双方向データ バインディングを理解し、Vue の双方向バインディングと一方向データ フローが競合するかどうかを分析します。お役に立てれば幸いです!

ご存知のとおり、Vue## では一方向のデータ フロー状態管理モード (Vuex など) の方が推奨されています。 # ただし、 Vue は、v-model を介した双方向のデータ バインディングもサポートしています。 (学習ビデオ共有: vuejs チュートリアル )

それでは、単一データ フローと双方向データ バインディングの概念は互いに矛盾しないのですか?

v-model を双方向のデータ バインディングに使用できるようになったので、双方向のデータ フローにするべきではないでしょうか? #この記事には主に次の内容が含まれています

一方向バインディング
• vs

  双方向バインディング

単一の一方向データ フロー
• vs

  双方向データ フロー

• v-model

  が単なる構文糖衣であると言える理由

一方向バインディングvs<span style="font-size: 18px;"></span> 双方向バインディング 一方向バインディング。

View

レイヤーと Model レイヤー間のマッピング関係を指します。

react

は、図に示すように、一方向バインディングを採用します。

In

React

では、 View レイヤーが変更されると、ユーザーは Actions を発行してそれを処理し、Actions で setState を使用して を処理します。 State Update、State は、更新後に View 更新をトリガーします。 View レイヤーは State を直接変更できず、より明確で制御可能な #Actions を通じて操作する必要があることがわかります。 # 一方向 バインディング メソッドの利点は、明確で制御可能なことですが、欠点は、テンプレート コードが必要になることです。Vue は、一方向バインディングと双方向バインディングの両方をサポートします

一方向バインディング 修正: 補間形式 {{data}}

、

v-bind
• も一方向バインディング 二-ウェイ バインディング: フォーム # の v-model##。View
レイヤーに対するユーザーの変更は、
• Model レイヤー ## に直接同期されます。 #実際には、v-model は単なる v-bind:value
および

v-on:input

の構文糖として、一方向バインディングを使用することもできます。 react に似ています。どちらにも長所と短所があります。一方向バインディングは明確で制御可能ですが、テンプレート コードが多すぎます。双方向バインディングは開発を簡素化できますが、データ変更が不透明になります。長所と短所は共存します。状況に応じて使い分けてください。 一方向データ フロー

vs

双方向データ フロー<span style="font-size: 18px;"> </span> データ フローとは、コンポーネント間のデータの流れを指します。 Vue と

React

はどちらも一方向のデータ フロー モデルですが、

vue

には双方向のバインディングが備わっていますv-model ただし、vue と react の親子コンポーネント間のデータ転送は依然として一方向のデータ フローに従います。親コンポーネントは props を子コンポーネントですが、子コンポーネントは親コンポーネントによって渡された props を変更できません。図に示すように、子コンポーネントはイベントを通じて親コンポーネントにデータ変更を通知することしかできません: # 一方向のデータ フロー モデルを通じて、すべての状態変化を記録および追跡できます。双方向のデータ フローと比較して、保守と問題の特定が容易になります。

なぜ

v-model

は単なる構文糖衣であると言えるのか<span style="font-size: 18px;"></span>あなた形式で v-model ディレクティブを使用できます、

<blockquote>、および <p> に双方向データ バインディングを作成します<select><code> 要素。コントロールの種類に基づいて要素を更新するための正しい方法が自動的に選択されます。いくぶん魔法のようではありますが、</code>v-model<code> は本質的に単なる糖衣構文です。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオに対して特別な処理を実行する役割を果たします。</code><code></code>前述したように、<code>Vue</code>ドキュメントには<code>v-モデル </code>単なる構文シュガー </select></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><input v-model=“phoneInfo.phone”/> //在组件中使用时，实际相当于下面的简写 <input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"</pre><div class="contentsignin">ログイン後にコピー</div></div></blockquote>では、問題は、なぜ <p>v-model<code> が真の双方向データ フローではないのかということです。この原則によれば、</code>model->view<code> の一方向データ フローも糖衣構文であり、</code>vue</p> の作成者によって単に実装されているだけであると考えることができますか?特定のメソッド<p><code> 本当の理由は上記の通りです。</code>データ バインディングは、<code>View</code> と <code>Model</code> の間のマッピング関係です。データ フローとは、</p>View<p> と <strong>Model<code> の間のデータ フローを指します。コンポーネント </code> <code><p><code>v-model</code> は、親コンポーネントの値を直接変更できないため、真の双方向データ フローではありません。たとえば、<code>v- で </code>props# をバインドした場合、 model<code> ## の値はエラーを報告します。コンポーネント </code></p> の値のみをバインドできます。<p>AngularJs<code> などの実際の双方向データ フローでは、子コンポーネントで直接更新される親コンポーネント これには価値があります。これが、</code>v-model<code> が単なる構文上のシュガーである理由です。</code></p> <p><strong>概要<span style="font-size: 18px;"></span></strong></p>一般に、一方向および双方向のデータ バインディングとデータ フローは、異なる次元を持つ 2 つの概念です。データ バインディングは、<p>View<code> と </code>Model<code> の間のマッピング関係です。データ フローはコンポーネント間の関係を指します。したがって、一方向のデータ フローには双方向のバインディングが存在することもあり、双方向のデータ フローにも双方向のバインディングが存在する可能性があります。この 2 つを混同しないでください。 </code>##この記事の転載元: https://juejin.cn/post/7085139499767840782<br></p> <p>著者: プログラマー Jiang クラスメイト<img src="https://img.php.cn/upload/image/872/693/378/1649942087746018.png" title="1649942087746018.png" alt="Vue の単一項目データ フローと双方向データ バインディングを理解します。この 2 つは競合しますか?"></p> <blockquote> (学習ビデオ共有: <p>Web フロントエンド開発<br>, </p>プログラミング入門<p>)</p> </blockquote></code></strong></p>

以上がVue の単一項目データ フローと双方向データ バインディングを理解します。この 2 つは競合しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。