はじめに
Vue.js を勉強していて、最初に使い方の違いがよく分からなかった computed, methods, watch を忘れないようにメモしていきます。
3つともできることはほとんど同じですが、使い所やパフォーマンスに違うがあります。
computed と methods の違い
どちらも関数を使って、計算した値を返すという点では同じです。
-
computed: 計算した結果を新たにプロパティとして公開する仕組み -
methods: C++ や Java の関数のように、計算した値を返す仕組み
computed と methods の違いは、計算結果がキャッシュされるかどうかです。computed は計算がキャッシュされ、必要なときのみ再計算をする優れた機能です。しかし、Vue が管理していない値の変化は検知できないので注意が必要です。
computed と watch の違い
computed は、計算した結果が新たにプロパティに加えられます。例えば、プロパティに price: [100, 200, 300] とあり、この合計を表す total をプロパティに加えたい場合に使用します。
対して watch は、特定のプロパティの変更を監視するために使います。例えば、total の合計金額が1000円を超えたら flag プロパティを true にするような処理をするために使用します。