【今日からはじめるVue.js】監視プロパティについて勉強しよう

今回は、Vue.jsの１機能である、監視プロパティについて書いていきたいと思います。

監視プロパティ(ウォッチャ)とは

監視プロパティ(ウォッチャ)とはデータや算出プロパティの状態を”監視”して、変化があったとき登録した処理を自動実行する機能のこと。
実際にソースコードを見ていきましょう。

上記のように、「watch」というプロパティを用います。

変数	役割
message	監視対象のデータ
第1引数(newMessage)	変更後のデータ
第2引数(oldMessage)	変更前のデータ

監視プロパティにはオプションがいくつか存在します

deep

ネストされたプロパティも監視したい場合は「deep」を用います。

immediate

監視プロパティを初期読み込み時にも呼び出したい場合に用います。

非同期処理(APIのアクセス)の実行や、コストの高い処理を実行したい時は監視プロパティを用いると良いようです。実際にQiitaのAPIを使ったサンプルプログラムを作成してみました。

Qiitaリアルタイム検索エンジン

プロパティが変化するたびにAPI呼び出しを行ってしまったら負荷がかかるので
Lodashのdebounce関数を使っています。
debounce関数によって、ユーザーによる値入力が完了した時点で定義した関数を呼び出しています。

まとめ

いかがだったでしょうか。普段よく見るリアルタイムで処理が動いているやつって
Vueで作成されていた場合、もしかしたら監視プロパティによって実現されていたかもしれません。
さぁ明日もがんばりましょ～