質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

6273閲覧

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

overdist1224

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/12/06 09:45

編集2021/12/06 11:08

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

試したこと

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

サンプルコード

React の場合

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

Vue の場合

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

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

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

投稿2021/12/07 00:19

FKM

総合スコア3647

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

overdist1224

2021/12/07 00:29

なるほど、なんとなくわかってきました。まだどちらも経験が浅いので具体的なものはイメージがつきませんが、「やれることは少ないがシンプルな React」と「色々なやり方ができるが複雑な Vue」という立ち位置という感じでしょうか。 その場合、僕が目にした「双方向データバインディングつらい」というのは、コード書き手によって実装のされ方が微妙に異なることへの可読性の低さであったり、統一されにくい構造というのが「つらい」という一言で表現されているのかもしれないと思いました。
FKM

2021/12/07 04:51 編集

Reactは逆にその少ないデータの動きをフックというもので補うんですが、ここは正直言ってVueより複雑なので、人によってはVueの方がまだ対話的なので、わかりやすいという人もいます。 なので、データの流れがシンプルだけど、処理の方法が比較的複雑なのがReact 対して、データの流れが複雑だけど、処理の方法が比較的単純なのがVueです
guest

0

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

投稿2021/12/06 11:37

編集2021/12/06 11:39
maisumakun

総合スコア146018

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

overdist1224

2021/12/06 12:16

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問