Vue の双方向データバインディングを避けたいのは何故でしょうか

Question

Vue と React を学び始めています。それぞれの違いについて書かれているブログ記事などを見ると、Vue は双方向データバインディングがつらいという記述がよくあります。なぜ、双方向がつらいのかが理解できていません。小さいサンプルではありますが、僕が試した限りでは Vue も React も実質同じような書き方になるのではないかと思っています。

試したこと

• 親子関係のコンポーネントで、データのやりとりを試した
• 子コンポーネントの <input> 入力内容を、親コンポーネントの state に反映するだけ

サンプルコード

• React https://codepen.io/overdist1224/pen/zYErZVN
• Vue https://codepen.io/overdist1224/pen/VwMebLx

React の場合

• React 公式ドキュメントにあるリフトアップを参考にしました
• 親コンポーネントで setState を使った更新する関数を定義
• 子コンポーネントに関数を渡す
• 子コンポーネントの onChange イベントで渡された関数を呼び出す
• 親コンポーネントの state が更新される

Vue の場合

• 親コンポーネントで更新する関数を定義
• 子コンポーネントに @input で関数を渡す
• 子コンポーネントから emit で渡された関数を呼び出す
• 親コンポーネントの state が更新される

という形で、書き方こそ違うものの、更新する関数を渡して子コンポーネント自身では何も更新しないので、どちらも同じような構造だと理解をしています。

Vue の場合は更新する関数定義を v-model で省略して書けることを、双方向データバインディングと表現していますが、この v-model のブラックボックス的な感じのものが、つらいと表現される部分なのでしょうか。それとも、もっと規模が大きくなってくると出てくる、Vue 双方向データバインディングのつらさがあるのでしょうか。

Answer 1

VueとReactの大きな違いですが、Reactは子コンポーネントから親コンポーネントで渡すことができるのはイベントのコールバック関数だけです。データなどは全て親コンポーネントに用意していき、それぞれ子孫コンポーネントに反映させていきます。

なので、データの流れがわかりやすいです。

対してVueは、親から子孫、子孫から親へのデータのやりとりが可能ですが、変数自体は親に置かないと子孫コンポーネントで値の同期がとれません。また、キャッシュを保持する算出プロパティと、保持しないメソッドがあり、ときに使い分けが必要になります。

つらいと思ってるのは、方法がいろいろある分、この使い分けやデータの行き来で混乱してくるんでしょうかね。

Comments

[overdist1224]

なるほど、なんとなくわかってきました。まだどちらも経験が浅いので具体的なものはイメージがつきませんが、「やれることは少ないがシンプルな React」と「色々なやり方ができるが複雑な Vue」という立ち位置という感じでしょうか。

その場合、僕が目にした「双方向データバインディングつらい」というのは、コード書き手によって実装のされ方が微妙に異なることへの可読性の低さであったり、統一されにくい構造というのが「つらい」という一言で表現されているのかもしれないと思いました。

[FKM]

Reactは逆にその少ないデータの動きをフックというもので補うんですが、ここは正直言ってVueより複雑なので、人によってはVueの方がまだ対話的なので、わかりやすいという人もいます。

なので、データの流れがシンプルだけど、処理の方法が比較的複雑なのがReact
対して、データの流れが複雑だけど、処理の方法が比較的単純なのがVueです

Answer 2

データを加工せず入れておくだけならどちらでも大差ないのですが、加工する（たとえば、1つの項目の変更で他の項目もそれに連動して値が変化する）ようなものを作ろうとすると、双方向では加工が複雑になるにつれてカオス化しがちです。

Comments

[overdist1224]

ありがとうございます！　その場合、v-model を使わず明示的に emit あるいは props で関数を渡すようにすれば複雑性は少なくなるということでしょうか？