LoginSignup
22
10

More than 5 years have passed since last update.

Vue.js のデータバインディングは双方向しかないという誤解

Last updated at Posted at 2018-04-26

ネットを見ていると Vue.js のデータバインディングは「双方向」とだけ紹介されていたり、双方向なので使いづらいとまで言っている人もいたりで、まー、たしかに Vue.js も双方向をアピールしているようなところがあるので仕方がないと思いつつも、誤解が広まるのもどうかと思ったのでちゃんと書いときます。

これは

<input type="text" v-model="foo" />

こう書くのと一緒です。

<input type="text" :value="foo" @input="foo = $event.target.value" />

値を渡すのと、変更イベントを受け取る処理は独立しています。

双方向というと親の変数を子が勝手に更新してしまっている印象がありますが、よく見れば子からのイベントに反応して親が自分で変更していることがわかります。

こうなるとあまり双方向という感じはしないんじゃないでしょうか。

なので、一方向にしたければ :value="foo"@input="foo = $event.target.value" を片方だけにするとか、別々に異なる処理を書けばよくて、そのときの変更イベントを受けとったときの処理が、値をそのまま変数にセットするだけで、その変数と渡す変数が同じ場合にコードが冗長だと感じたら初めて v-model に置き換えればいいということです。

つまり Vue.js は双方向データバインディングしかないのではなくて双方向データバインディングが書きやすいが正しいです。

22
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
10