Vue インスタンスのmethods, computed, watchとは何か

Vueインスタンスにはmethods、computed、watchという3つのオプションがある。それぞれリアクティブなデータハンドリングのために用意されていて、用途によって違いがある。いずれも Vue インスタンスを指すthisがある。

methods

methodsは文字通りいわゆるメソッドで、呼ばれれば実行される。

computedやwatchの内部処理をmethodに切り出す用途にも使われる。

computed 算出プロパティ

computedはmethodsと同じように関数を書けますが、こちらは結果がキャッシュされ、一度算出されたものは依存するデータが変更されない限り実行されず、キャッシュが返されます。methodsとの使い分けもキャッシュするかどうかをもとに判断する。キャッシュを利用できるものは computed を使うと高速化できる。

computed は算出プロパティとも呼ばれる。テンプレート内に式を書くことができるが、同じ記述を何度もすることになりがちなうえ、毎回実行されて無駄になるので、それを computed に書くとキャッシュも自動的にされて良い。テンプレート構文の中に式を書くのはできる限り避けた方が良い。

watch 監視プロパティ/ウォッチャー

watchオプションもmethodsやcomputedと同じように関数が書ける。computedと同じくインスタンス上のデータ更新にリアクティブな処理を書くことができますが、watchに書かれた関数で値を返すことはありません。用途的には非同期化したい高コストなものなどが当てはまります。できる限りは computed で済ませるほうが良いです。watchに書かれる関数は第一引数に更新された新しい値が渡ってきて、第二引数に古い値が渡ってきます。

また、素直なデータの監視だけでなく、オブジェクトを監視してリアクティブに処理を行うこともできます。その場合は、データプロパティに対して handler を設定し、ネストしたデータまで監視する場合は deep プロパティに true を設定します。