【Vue.js入門】05データバインディングとリアクティブの解説

Vue.js入門第5回。データバインディング、リアクティブの解説をします。

データバインディングとは

データバインディングとはその名前の通り、データをバインド（はめ込む）ことです。

前回作成したVue.jsでHelloWorldを表示するソースを例にすると、javascriptのmessageプロパティで定義されているデータをHTML側で「{{message}}」と記述して表示していますが、これらをデータバインディングと言います。

データバインディングには3種類あります。

それぞれの違いをVue.jsで確認してみます。resultタブを開きます。

単方向バインディングは「1文字消す」ボタンを押す度に、テキストボックスとテキストにも反映されます。
テキストボックスに入力した文字はテキストには反映されません。

messageプロパティ→バインドされるHTML要素の単方向と考えればわかりやすいでしょうか？

双方向バインディングは「1文字消す」ボタンを押す度に、テキストボックスとテキストにも反映されますし、テキストボックスへ入力した文字もテキストに反映されています。

messageプロパティ←→バインドされるHTML要素の双方向と考えればわかりやすいでしょうか？

ワンタイムバインディングは初回表示時のみ反映され、「1文字消す」ボタンを押してもテキストには反映されません。

初回のみ単方向バインディングが行われると考えればわかりやすいでしょうか？

リアクティブとは英語では「反応的な」という意味があるそうですが、上記サンプルの「1文字消す」ボタンがリアクティブな動作と言えます。

「1文字消す」ボタンの処理はdataプロパティで保持している文字列を消しているのですが、バインドされたテキストボックスやテキストにもリアルタイムで反映されています。

身近な例ではエクセルの関数がイメージ付きやすいと思います。計算式さえ入れておけば、対象のセルが書き換わると再計算され結果セルの値が更新されます。このような動作をリアクティブと言います。

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。