こんにちは！ともです(@_tomo_engineer)！

この記事ではVue.jsの監視プロパティ(ウォッチャ)についてまとめます。

前回は算術プロパティについて書きましたが、監視プロパティと似ているなという印象でした。プロパティにはそれぞれの役目があるので使い分けを考えながら見て行きます。

参考にしたものは以下です。

基礎から学ぶVue.js(書籍)

Vue.js：日本語ドキュメント

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

「ウォッチャ」とはデータや算術プロパティの状態を監視して、変化があったとき登録した処理を自動実行します。つまり、データの変化をトリガにしたフックです。

引用元：基礎から学ぶVue.js(書籍)

この説明はとても分かり易かったです。

しかし、データが変化した時に動作するメソッドに算術プロパティのsetter・getterがあったと思います。

日本語ドキュメントには、以下の様に書かれています。

多くの場合では算出プロパティの方が適切ではありますが、カスタムウォッチャが必要な時もあるでしょう。データの変更に対して反応する、より汎用的な watchオプションを Vue が提供しているのはそのためです。データが変わるのに応じて非同期やコストの高い処理を実行したいときに最も便利です。

引用元：Vue.js – ウォッチャ-

多くの場合、算術プロパティで代用できる様です。前回getter・setterでやった様な処理は算術プロパティに任せるべきな様ですね。

ウォッチャを利用する場面は、データが変わるタイミングで非同期やコストの高い処理を実行したい時が使い所だという事が分かりました。

ウォッチャの登録

watch: {
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
 },

日本語ドキュメントからの引用ですが、この様にウォッチャを登録するする事ができます。

算術プロパティとは違い、変更前後のデータを引数にもつ関数として定義できます。

オプション

ウォッチャではオプションを任意で設定できる様です。

API – Vue.js

deep	ネストされたオブジェクトも監視する
immediate	初期読み込み時にも呼び出す

「ウォッチャ」は算術プロパティでは算術プロパティができなかった、よりカスタムした監視を行える様です。オブジェトがいくつかプロパティを持っている場合、そのプロパティの変化も監視できます。

監視の解除

監視を解除する事も「ウォッチャ」では可能です。

var unwatch = vm.$watch('a', cb)
// 歌詞を解除
unwatch()

この様にunwatch()を利用して監視を解除できる事も可能です。ですので一度だけ監視するという事が可能であります。

算術プロパティとは違いよりデータを監視する事に特化している感じがします。

実行頻度の制御

非同期やコストの高い処理を実行したい時が「ウォッチャ」の使い所だと書きました。

しかしコストの高い処理を変更があるたびに実行していてはパフォーマンスが下がってしまいます。ユーザの入力が終わってから「ウォッチャ」で処理を実行して欲しいですね。

そこで、setTimeoutやLodashを利用し、実行頻度を制御する事が一般的です。

まとめ

今回は「ウォッチャ」について記事を書きました。

まとめは以下です。

オプションはそれぞれ役割がありますので、しっかり使い分けて利用していきたいです。