【Vue.js】「ウォッチャ」、「computed」の使い分け

ウォッチャとは？

データの変更を監視して登録しておいたイベントハンドラを呼び出してくれる機能

ウォッチャの仕組み

コンポーネント毎に存在しており、コンポーネントのデータ（算出プロパティを含めて）を全て監視しています。

イベントハンドリング(v-on)との違い

イベントハンドリングと似ているがイベントが呼び出されるタイミングがイベントではなくデータの変更である点

構文

算出プロパティとは？

アプリケーションのデータに基づいて何らかの加工を行った結果を返すプロパティです。通常のプロパティと同じように扱えます。

仕組み

算出プロパティがテンプレートやメソッドの中で参照されるとVueはその時の値をキャッシュします。（参照されるたびに同じ処理が行われるのは無駄が多いため）

ただ、算出プロパティの中で参照されているリアクティブデータが更新されるとVueはキャッシュを捨てて算出プロパティを再度実行します。(Vueは算出プロパティとリアクティブデータで依存関係を持っていて互いに監視をしています。）

methodsとの違い

メソッドは依存関係のあるなしにかかわらずデータが更新され次第必ず再実行されます。算出プロパティはちゃんと依存したプロパティが更新された場合のみ実行してくれます。

例えば、全く関係ないボタンを実装したとして別ボタンを押した場合でもそれによってDOMが再描画されたらmethodsで実装している処理が何度も実行されてしまうことになります。なので、画面に描画させているデータ等をv-textを使って動的に描画させる場合等はmethodsではなく必ずcomputedを使用するようにしましょう。

用途

絞り込みの結果等を持たせる等、キャッシュされる性質を利用して重い処理の記述及びデータ保持に使用したりします。

Mustache記法との使い分け

この算出プロパティの役割としてはMustache記法に直接式を書いて動作させる役割に似ています。

Mustache記法でも式展開を使うことができますがこれは複雑な処理には向いていません。また、複数箇所に同じ内容を記述したい場合等でも算出プロパティを使った方が良いでしょう。また、Mushtacheだと単一の式しか記述できないのでそもそもテンプレートには記述ができないしきもあります。

構文

ウォッチャと算出プロパティとの使い分け

アプリが保持しているデータをそのまま使用する場合はウォッチではなく算出プロパティを使えば良い。返したいデータをアプリケーションの外部から取得しなければならない場合はウォッチャを使います。

理由としては算出プロパティではハンドラ処理を終えるまで再描画されないためユーザーを待たせてしまうため。ウォッチであればAjaxによる非同期通信、ブラウザに負荷がかからないようにハンドラの実行頻度を調整できる。

具体的には、関数の中でreturnを返すような同期処理の場合はcomputedを使う、関数の中でreturnを返さない非同期処理の場合はwatchを使うというように覚えれば良いと思います。

v-onとの使い分け

v-onはHTMLがすっきりはしない。（いまいち使い分けの方法がわからないな。）