ホームページ > 記事 > ウェブフロントエンド > Vue の一方向データフローの原理の詳細な分析

Vue の一方向データフローの原理の詳細な分析

小云云オリジナル: 2017-12-22 13:10:292279ブラウズ

この記事では主に Vue の一方向データフローの原理を詳しく紹介します。興味のある方はさらに詳しく学ぶことができます。 . 皆さんのお役に立てれば幸いです。

一方向データフローとは

一方向データフローとは、ステータスを一方向からのみ変更できることを意味します。次の図は、一方向データフローの最小限の表現です:

一方向データフローの最小限の表現

一方向データフローに対応するのは、双方向データフロー (2 とも呼ばれます) -way バインディング)。双方向のデータフローでは、モデル (状態のコレクションとして理解できます) は、それ自体の状態または他のモデルの状態を変更でき、ユーザー操作 (入力ボックスへのコンテンツの入力など) によっても状態を変更できます。。そのため、1 つの状態を変更すると一連の状態変更がトリガーされる可能性が高く、最終的な状態がどのようになるかを予測することが困難になります。コードのデバッグが困難になります。以下の図に示すように:

双方向データフローと比較して、一方向データフローでは、状態を変更する必要がある場合、変更プロセスを完全にやり直す必要があります。これにより、状態の変更方法が制限され、状態が予測可能になり、デバッグが容易になります。

一方向データフローの利用シナリオ

複数のコンポーネントが状態を共有すると、コンポーネント（兄弟コンポーネント）間で状態を共有したり通信したりすることが困難になります。共有状態を抽出して一方向のデータフローを使用することが容易になります。

v-model から始めます

1. v-model は入力要素で使用されます

v-model は使用される際には双方向バインディングに非常に似ていますが (実際には...)、Vue は単一ですデータフロー、v-model は単なる糖衣構文です:

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

コードの最初の行は、実際には 2 行目の単なる糖衣構文です。コードの 2 行目は次のように省略できます:

<input :value="something" @input="something = $event.target.value" />

このコード行を理解するには、まず input 要素自体に oninput イベントがあることを知る必要があります。これは HTML5 に新しく追加されたもので、次のようになります。 onchange (入力ボックスの内容が変更されるたびに) 変更が発生すると、oninput がトリガーされ、最新の値が $event を通じて何かに渡されます。

構文シュガーと元の構文の 2 行のコードを注意深く観察すると、次の結論を導き出すことができます。入力要素に v-model 属性を追加すると、デフォルトでその値が要素の属性として使用されます。そして、「input」イベントはリアルタイムとして渡されます。 value

2のトリガーイベントはコンポーネント上で使用されます

v-modelは入力だけでなくコンポーネント上でも使用できます。公式ウェブサイトのデモを見てください。

<currency-input v-model="price"></currency-input>
Vue.component(&#39;currency-input&#39;, {
 template: &#39;\
 <span>\
  $\
  <input\
  ref="input"\
  v-bind:value="value"\
  v-on:input="updateValue($event.target.value)"\
  >\
 </span>\
 &#39;,
 props: [&#39;value&#39;], // 为什么这里要用 value 属性，value在哪里定义的？
 methods: {
 // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
 updateValue: function (value) {
  var formattedValue = value
  // 删除两侧的空格符
  .trim()
  // 保留 2 位小数
  .slice(
   0,
   value.indexOf(&#39;.&#39;) === -1
   ? value.length
   : value.indexOf(&#39;.&#39;) + 3
  )
  // 如果值尚不合规，则手动覆盖为合规的值
  if (formattedValue !== value) {
  this.$refs.input.value = formattedValue
  }
  // 通过 input 事件带出数值
  // <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
  this.$emit(&#39;input&#39;, Number(formattedValue))
 }
 }
})

これら 2 つの質問に対する答えがわかったら、v-model を本当にマスターできたことになります。理解できない場合は、次のコードを見てください:

<currency-input v-model="price"></currency-input>
所以在组件中使用时，它相当于下面的简写：
//上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

v-model 属性。デフォルトでは、その値はコンポーネントの属性として使用され、「input」値はイベントをコンポーネントにバインドするときにイベント名として使用されます。これは、コンポーネントを作成する場合に特に便利です。

3. v-modelの欠点と解決策

チェックボックスやラジオボタンなどの一般的なコンポーネントを作成する場合、v-modelは使いにくいです。

<input type="checkbox" v-model="something" />

v-model は value 属性と oninput イベントを提供しますが、必要なのは value 属性ではなく、checked 属性であり、このラジオボタンをクリックしても oninput イベントはトリガーされません。 onchange イベントのみをトリガーします。

v-model は入力要素でのみ使用されるため、この状況は簡単に解決できます:

<input type="checkbox" :checked="value" @change="change(value, $event)"

v-model がコンポーネントで使用される場合:

<checkbox v-model="value"></checkbox>

Vue.component(&#39;checkbox&#39;, {
 tempalte: &#39;<input type="checkbox" @change="change" :checked="currentValue"/>&#39;
 props: [&#39;value&#39;],
 data: function () {
  return {
   //这里为什么要定义一个局部变量，并用 prop 的值初始化它。
   currentValue: this.value
  };
 },
 methods: {
 change: function ($event) {
  this.currentValue = $event.target.checked;
  this.$emit(&#39;input&#39;, this.currentValue); 
 }
})

Vue 2.2 バージョンでは、カスタマイズできます。コンポーネントを定義するときにモデルオプションを使用して prop/event を実行します。

4. Vue コンポーネントのデータフロー

上記の v-model の分析から、双方向データバインディングが一方向バインディングに基づいて入力要素 (input、textare など) に変更を追加することが理解できます。 (input) イベントを使用してモデルとビューを動的に変更します。つまり、親コンポーネントのイベントをトリガー ($emit) して mv を変更し、mvvm の効果を実現します。 Vue コンポーネント間のデータ転送は一方向です。つまり、データは常に親コンポーネントから子コンポーネントに渡されます。子コンポーネントは内部で独自のデータを保持できますが、データを変更する権限はありません。開発時に親コンポーネントによって渡されます。作成者がこれを実行しようとすると、vue はエラーを報告します。これは、開発中に、親コンポーネントの特定のデータに依存する複数のサブコンポーネントが存在する可能性があり、サブコンポーネントが親コンポーネントのデータを変更できる場合、サブコンポーネントが変更されます。このデータに依存するすべてのデータをトリガーします。子コンポーネントが変更されたため、Vue は子コンポーネントが親コンポーネントのデータを変更すると警告をスローすることを推奨しません。フローチャートは次のとおりです:

そのため、子コンポーネント内のpropsを変更したい場合は、子コンポーネントを親コンポーネントとして使用するため、

1.ローカル変数を定義し、propの値で初期化します。
2. 計算されたプロパティを定義し、prop 値を処理して返します。

Vue の一方向データ フローの原理の詳細な分析

関連記事

Vue の一方向データフローの原理の詳細な分析