親コンポーネントと子コンポーネント間の双方向バインドが悪いのはなぜですか？

Question

私は最近、私はVue.jsに探して、そのガイドを読んでいた、主にAngularJSで開発を行ってきたが、1つのページには言及：デフォルトで

を、すべての小道具は、一方向ダウン結合を形成子プロパティと親のプロパティの間にあります。親プロパティが更新されると、それは子に流れますが、他の方法では流れません。このデフォルトは、子コンポーネントが誤って親の状態に変化するのを防ぐためのものです。これにより、アプリのデータフローを推論するのが難しくなります。

これはhttps://vuejs.org/guide/components.html#Prop-Binding-Typesです。

双方向バインディングを使用する際の原則があるのか​​、それともそうでないのか疑問に思っていますか？

子コンポーネントが配列変数を管理する必要がある場合は、双方向バインディングが有効であるようです。

たとえば、自分のVue.jsまたはAngularJSのバージョンをhttp://selectize.github.io/selectize.js/にしたいとします。

双方向バインディングを使用する場合は、親コンポーネントの配列をVue.jsまたはAngularJSのselectizeコンポーネントに渡し、selectizeコンポーネントでそれを管理させます。

結合双方向が使用されていない場合、選択肢のようになりそうです：

。項目が追加/削除されたときに、親コンポーネントが手動で配列を更新する必要があります。

b。または、親が配列を手動で設定する関数を持つ場合、この関数は子コンポーネントに渡されます。

c。子コンポーネントは、親コンポーネントがリッスンし、その配列を更新するイベントを送出します。

これらは代替手段だと思いますか？どちらもより冗長で、多くの利益をもたらすとは思われません。

これは一例ですが、多くのコンポーネントがこの問題を抱えていると思います。別の例としては、製品セレクタコンポーネントがある場合、このコンポーネントに配列変数を渡すと便利ですコンポーネントは、選択した製品を反映するようにアレイを管理します。この上

私の主な質問は以下のとおりです。

1. は正しい結合双方向の代替の私の考えですか？

2. 上記の場合、片方向バインディングを使用する利点はありますか？ （私は「親の状態を誤って突然変異させるのを避けるために多くの利点を提供する代替手段を見ない」）

3. もし、（1）と（2）が正しいなら、片方向バインディングが「親の状態を誤って突然変異させる」ことを避けるために明確な利点がありますか？

Answer 1

"one-way-down binding"は、OOのカプセル化と同様に、コードの複雑さを軽減するための原則に過ぎません。

私の意見では、著者は「双方向バインディング」（実際にはvuejsがそれをサポートしている）を使用しないという意味ではなく、単にそれを悪用しないと言います。

あなたの例では、product-selectorはネイティブ入力と似ていますが、確かにv-modelのように双方向バインディングを使用できると思います。