【Vue.js】computedとmethodsの違いとは？【初心者向け】

今回はVue.jsのオプションであるcomputedとmethodsの違いと使い分け方を解説します。

✔こんな人向けの記事です

Vue.jsを学習中の人。
computed、methodsをなんとなくで使い分けている。
正確な違いとそれぞれの特徴を知りたい。

こんな疑問に答えます。

computed, methodsの違い
computed, methodの使い分け方
最後に

computed, methodsの違い

算出プロパティである。orメソッドである。

computedは算出プロパティ。簡単に言うと計算機能付きのプロパティです。既存のデータに対して何らかの処理をした結果をデータとして返します。

methodsのオブジェクト内での役割はメソッドです。コードの管理のために処理を分けたり、イベントハンドラ（クリックしたら処理を実行する等）を担当します。

計算結果をキャッシュする。or しない。

computedは一度計算してしまえば、その後同じ算出プロパティが呼び出された際も以前キャッシュされたデータを即時返すだけなので何度も同じ処理を行うということはありません。

キャッシュが削除され再度計算されるのは、依存するデータの値が更新されたときだけです。

methodsは結果をキャッシュしないので、一度計算を行った場合でも、呼び出されるたびに再計算が行われます。

メモリに負荷をかけるというデメリットもあるので気をつけましょう。

実際のコードで確認してみましょう。

<template> <div>
    <ol class="use-computed">
      <li>{{ computedNumber }}</li>
      <li>{{ computedNumber }}</li>
      <li>{{ computedNumber }}</li>
    </ol>
    <ol class="use-methods">
      <li>{{ methodsNumber() }}</li>
      <li>{{ methodsNumber() }}</li>
      <li>{{ methodsNumber() }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  computed: {
    computedNumber: function() {
      return Math.random(); //0〜1のランダムな数字を生成
    }
  },
  methods: {
    methodsNumber: function() {
      return Math.random();//0〜1のランダムな数字を生成
    }
  }
}
</script>

<template>タグ内がHTMLの記述。<script>タグ内がJavascriptの記述です。

computedとmethodsのそれぞれ処理内容が全く同じものを定義してみました。

Math.random()でランダムな数字を返す関数です。

computedを使った方は一度計算がされると値がキャッシュされ、再度呼び出されても同じ値を返し続けています。

対してmethodsを使った方は呼び出しのたびに再計算がされそれぞれ異なる値が返ってきていますね。

おさらいですが、computedが再度計算されるのは依存しているデータ、つまりVue.jsで管理されたリアクティブデータの値が変化したときのみです。

今回のコードのMath.random()で生成される値は、JavaScript本来の関数でVue.jsで管理されたデータではないため、同じ値がキャッシュされ続けているというわけです。

呼び出し時に()がいらない。or いる。

computedはプロパティなので呼び出し時に()はいりません。

methodsはメソッドなので呼び出し時に()が必要です。

getter関数とsetter関数が使える。or getter関数しか使えない。

getter関数とは処理を行った算出プロパティの値を単純に返す関数です。

setter関数とは算出プロパティの引数に新しい値をセットすることで、値を更新できるようにする関数です。

computedではgetter、setterどちらも使うことができます。

methodsではgetterのみ使用可能です。

computed, methodの使い分け方

これまでcomputedとmethodsの違いを見てきました。実際に使う時はどんな場面でどっちを使うべきか見てみましょう。

computedを使うべき場面

computedは算出プロパティ。既存のデータになんらかの処理をした値を返します。

個数や金額をデータから参照して合計や税込み表示などの処理を加えるなどの場面ではcomputedを使いましょう。

<template> <div>
    <ul v-for="item in items">
      <li>
        <span>{{ item.name }}</span>
        <span>{{ item.price }}円</span>
        <span><input type="number" v-model:value="item.quantity">個</span>
        <span>{{ item.price * item.quantity }}円</span>
      </li>
    </ul>
    <div>合計金額：{{ totalPriceWithTax }}円(税込)</div>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { name: 'りんご', price: 100, quantity: 2 },
          { name: 'みかん', price: 200, quantity: 1 },
          { name: 'ぶどう', price: 800, quantity: 1 }
        ]
      }
    },
    computed: {
      // 合計金額(小計)
      totalPrice: function() {
        return this.items.reduce(function(sum, item) {
        return sum + (item.price * item.quantity);
      }, 0)
      },
      // 合計金額(税込)
      totalPriceWithTax: function() {
        return Math.floor(this.totalPrice * 1.10);
      }
    }
  }
</script>

methodsを使うべき場面

メソッドはイベントハンドラ（クリックしたら、マウスオーバーしたらなにかの処理をする等）の実装に適しています。

先ほどのコードに購入するボタンを付けてクリックすると、アラートが表示されるようにしてみました。

<template> <div>
    <ul v-for="item in items">
      <li>
        <span>{{ item.name }}</span>
        <span>{{ item.price }}円</span>
        <span><input type="number" v-model:value="item.quantity">個</span>
        <span>{{ item.price * item.quantity }}円</span>
      </li>
    </ul>
    <div>合計金額：{{ totalPriceWithTax }}円(税込)</div>
    <button @click="doBuy">購入する</button> //クリックしたらdoBuyメソッドを実行
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { name: 'りんご', price: 100, quantity: 2 },
          { name: 'みかん', price: 200, quantity: 1 },
          { name: 'ぶどう', price: 800, quantity: 1 }
        ]
      }
    },
    computed: {
      // 合計金額(小計)
      totalPrice: function() {
        return this.items.reduce(function(sum, item) {
        return sum + (item.price * item.quantity);
      }, 0)
      },
      // 合計金額(税込)
      totalPriceWithTax: function() {
        return Math.floor(this.totalPrice * 1.10);
      }
    },
    methods: {
      //〇〇円のお支払いですというアラートを表示。
      doBuy: function() {
      window.alert(this.totalPriceWithTax + '円のお支払いです。');
      }
    }
  }
</script>