JavaScript

Vueのcomputedとmethodsの「使い分け」を解説

課題を持った人
課題を持った人
Vue.jsにはcomputedとmethodsというよく似たVueコンストラクタのオプションオブジェクトがあるけど、どうやって使い分けたらいいの?

こういった要望に答えます。

computedとmethodsの比較

computed

  • 算出プロパティ ※計算機能付きのプロパティ
  • データそのものに何らかの処理を与えたものをプロパティにしたい(インスタンスに持たせて参照できるようにしたい)ときに用いる
  • 計算結果をキャッシュする
  • 一度計算を行った場合、再度関数を呼び出しても依存しているデータに変更がない限りキャッシュを返す
  • プロパティなので呼び出し時の()はいらない
  • getterとsetterが使える

methods

  • メソッド
  • メソッドなので呼び出しには()がいる
  • 計算結果をキャッシュしないので、一度計算を行った場合も関数を呼び出される度に再計算を行う
  • 使えるのはgetterのみでsetterは使えない

筆者
筆者
computedが再計算を行うのは、依存するデータが変わった時のみです。そのため、Vueインスタンスのデータではないもの(例えば現在日時やDOMの状態)が変化したとしても検知できないため再計算は行われません。この点には注意しなければいけません。

こんな風にcomputedとmethodsを使い分けよう

computedとmethodsは算出プロパティとメソッドなので、明確に異なるものなのですが、Vue.jsを勉強しはじめたばかりだと使い分けが曖昧になってしまいがちかなと思います。ここでは、こんな時はcomputed、こんな時はmethodsを使うといいと具体例を書きます。

こんな時はcomputedを使おう

例えば、ショッピングカートに入った商品の個数を変更すると、小計金額と合計金額(税込)が変わるような処理を作る場合は、computedがいいかと。

  • 小計金額は商品金額と個数に依存
  • 合計金額も商品金額と個数に依存
  • さらに、合計金額(税込)も合計金額(税別)に依存

こんな風にプロパティが依存関係にある場合は、プロパティ値が変わる度に自動計算してくれるので便利です。また、コードもすっきりとまとり見通しがよくなります。

こんな時はmethodsを使おう

クリック時、マウスオーバー時等、何かアクションが起きた時に処理を行うような場合はmethodsを使うといいです。先ほどのショッピングカートの例に購入ボタンの処理を加えてみました。

筆者
筆者
以上、Vue.jsのcomputedとmethodsの使い分けでした。すこしでも役に立てれば幸いです。