【Vue.js入門】12_監視プロパティ（ウォッチャ）

Vue.js入門第12回。今回は監視プロパティについて解説してみます。

監視プロパティ（watch)とは

特定のデータや算出プロパティの状態を監視して、変化があった時に事前に登録している処理を自動で実行できるものです。

検索などのサジェストなどが利用シーンです。

ソースコード

解説

Javascript

dataプロパティに監視対象のmessageプロパティを定義しています。

watchプロパティにmessageを指定して監視対象にしています。messageプロパティに変化があると関数が呼び出され、変化前と後の値がコンソールに出力されます。

HTML

messageプロパティを表示するpタグ、messageプロパティを変更するテキストボックスを双方向データバインディング（v-model）で表示しています。

また、デバッグ用にdataプロパティの中身を出力しています。$が必要なところ注意です。

単位変換アプリを作る

例題として単位変換アプリを作成してみます。キロメートル、メートル、ミリメートルを相互変換するアプリです。

ソースコード

解説

Javascript

dataプロパティにはそれぞれの単位のデータを保持するkm、m、mmプロパティを定義しています。

watchプロパティには、それぞれのプロパティに変化があったら計算して更新する関数を定義しています。

HTML

HTMLでは双方向データバインディングでそれぞれの単位を表示しています。

算出プロパティと監視プロパティの比較

なおどちらのプロパティでも記述できる場合は、シンプルな記述の算出プロパティが推奨されます。

入力された姓、名のフルネームを表示するサンプルでそれぞれの記述を比較してみます。

ソースコード

解説

Javascript

コメントアウトされているのが監視プロパティで実装されたもの、有効になっているのが算出プロパティで実装されたものです。コメントアウトを入れ替えるとそれぞれの動作を確認できます。

監視プロパティ版では、dataプロパティに姓、名、フルネームを保持するプロパティを定義しています。
watchプロパティでは、姓に変化があったら、変更後の姓の名を連結してフルネームに設定しています。名に変化があった場合はその逆です。

算出プロパティではdataプロパティに姓、名を保持するプロパティと、算出プロパティにフルネーム用のプロパティを定義し、姓、名を連結して返すようにしています。

初学だと違いがいまいちわかりませんが、比較することでそれぞれのプロパティの動作が理解できてきますね。

HTML

HTMLでは双方向データバインディングでそれぞれを表示しています。

deepオプションとimmediateオプション

監視プロパティにはdeepオプションとimmediateオプションがあります。

deepオプションをtrueにすると監視対象のプロパティのネストされた値に変化があった場合も検知することが出来ます。初期値はfalseで、プロパティの中身は検知できません。

immediateオプションは初回読み込み時も監視プロパティを呼び出すどうかです。初期値はfalseです。

サンプルコードで動作確認してみます。監視プロパティでログメッセージを出力するようにして、各オプションによって呼び出されるかどうか確認しています。

ソースコード

Javascript

dataオプションには、deepオプション確認用にcolor1、color2、colorsプロパティを定義しています。color1は文字列、color2とcolorsはそれぞれオブジェクトと配列で、ネストされています。また、immediateオプション確認用にcolor3プロパティを定義しています。

監視プロパティにはそれぞれのプロパティを監視させています。deepなどオプションを指定する場合、実行される関数名は「handler」に記述する点を注意してください。

また、methodsプロパティには色情報を更新する関数を定義しています。プロパティを丸ごと更新するケースと、プロパティ内のネストされているキーや要素を指定して更新するケースをそれぞれ実装しています。
コメントアウトを切り替えて動作確認してみてください。

HTML

書くプロパティの値を表示し、色情報を更新するためのテキストボックスと更新ボタンを表示しています。

解説

deepオプションがtrueの場合は、color2プロパティ、colorsプロパティ自体を更新する時はもちろん、中身のnameキーや要素番号を指定して更新した場合も監視プロパティで検知されていることがわかります。

一方、deepオプションがfalseの場合は、ネストされたキーなどを指定して更新していても検知されていないことがわかります。

immediateオプションについても、trueの場合だと初回読み込み時も監視プロパティによって検知され、falseの場合は初回読み込み時は検知されていないことがわかります。