Vueの双方向バインディングは一方向のデータフローと競合しますか？

序文

ご存知のとおり、Vue一方向データフローの状態管理モードの方が推奨されますが（たとえばVuex）、Vue同時に、v-model実装することで双方向のデータバインディングをサポートします。
したがって、問題は、単一アイテムのデータフローと双方向のデータバインディングの概念が互いに矛盾していないかどうかです。双方向のデータバインディングをv-model使用できるようになったので、双方向のデータフローではないでしょうか。

この記事は主に以下の内容を含みます

一方向バインディングvs双方向バインディング
一方向のデータフローvs双方向のデータフロー
なぜそれはv-model単なるシンタックスシュガーなのですか？

一方向バインディング`vs`双方向バインディング

一方向および双方向のバインディングとは、レイヤー間のマッピング関係を指しViewます。図に示すように、一方向バインディングが採用されています。では、レイヤーが変更されると、ユーザーは発行によってレイヤーを処理し、ペアでは更新され、更新後に更新がトリガーされます。レイヤーを直接変更することはできず、操作する必要があります。これにより、より明確で制御可能になります。Model
react

ReactViewActionsActionssetStateStateStateViewViewStateActions

一方向バインディング方法の利点は、明確で制御可能であることですが、欠点は、Vue一方向バインディングと双方向バインディングの両方をサポートするテンプレートコードが存在することです。

一方向バインディング：補間形式{{data}}、v-bindまた一方向バインディング
双方向バインディング：フォームv-model、レイヤーへのユーザーの変更はレイヤーViewに直接同期されますModel

これは、実際にはとの構文糖衣でv-modelあり、同様の一方向のバインディングを取ることもできます。どちらにも長所と短所があります。一方向のバインディングは明確で制御可能ですが、テンプレートコードが多すぎます。双方向のバインディングは開発を簡素化できますが、不透明（OPAQUE）データの変更にもつながります。長所と短所が共存します。状況に応じてご利用いただけます。v-bind:valuev-on:inputreact

一方向のデータフロー`vs`双方向のデータフロー

データフローとは、コンポーネント間のデータのフローを指します。
VueどちらReactも一方向のデータフローのモデルです。vue双方向のバインディングがありますが、親コンポーネントと子コンポーネント間v-modelのデータ転送は引き続き一方向のデータフローに従います。親コンポーネントは子コンポーネントに渡すことができますが、子コンポーネントは変更できません。親コンポーネント。子コンポーネントは、図に示すように、イベントを介してのみ親コンポーネントにデータ変更を通知できます。一方向データフローモデルを介して、すべての状態変更を記録および追跡できます。双方向データと比較して流れ、維持と維持が容易です。位置決めの問題vuereactpropsprops

なぜそれは`v-model`単なるシンタックスシュガーなのですか？

v-modelディレクティブを使用して、フォーム<input>と要素<textarea>に双方向のデータバインディングを作成できます。<select>コントロールタイプに基づいて要素を更新するための正しいメソッドを自動的に選択します。やや魔法のようv-modelですが、本質的には糖衣です。データを更新するためにユーザー入力イベントをリッスンする責任があり、いくつかの極端なシナリオに対していくつかの特別な処理を行います

上記のように、Vueドキュメントには、それはv-model単なるシンタックスシュガーであると書かれています

<input v-model=“phoneInfo.phone”/>

//在组件中使用时，实际相当于下面的简写
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"
复制代码

那么问题来了，为什么说v-model不是真正的双向数据流呢？按照这道理，是不是可以认为model->view的单向数据流也是语法糖啊，也是vue作者通过一定方法实现的而已
真正的原因上面已经说了，数据绑定是View与Model之间的映射关系，数据流指的是组件之间的数据流动
v-model不是真正的双向数据流，是因为它不能直接修改父组件的值，比如你在v-model中绑定props中的值是会报错的，它只能绑定组件的值
而真正的双向数据流，比如AngularJs，是允许在子组件中直接更新父组件的值的，这就是为什么说v-model只是语法糖的原因

总结

总得来说，单双向数据绑定与数据流是两个不同维度的概念，数据绑定是View与Model之间的映射关系，数据流指的是组件之间的数据流动。因此，单向数据流也可有双向绑定，双向数据流也可以有双向绑定，两者不应该混为一谈

参考资料

Vue的单向数据流和双向数据绑定不是冲突的吗？
Vue的双向绑定和单向数据流