【Vue.js】メソッド vs computedプロパティ(算出プロパティ) サンプル

メソッドとcomputedプロパティの違いに関する記述はすでにたくさんあるので、今回は個人的にわかりやすいと思った、これらの違いを説明したコードを紹介したいと思います。

簡単に違いと使い分けについて

Computedプロパティとmethodの違い

算出プロパティとメソッドの違いは、“算出プロパティが処理の結果をキャッシュする”ことです。
算出プロパティがキャッシュした結果を更新するのは、依存するデータが変更されたときです。
一方、メソッドは常に処理が実行されます。

Computedプロパティのメリット・メソッドとの使い分け

結果が同じなら、常にメソッドを使えば良いと思われるかもしれません。
算出プロパティのメリットは、結果をキャッシュしているため処理が高速であるという点です。
例えばリストをソートする処理を作成するときに、メソッドで実装するとソートするごとに毎回処理が実行されます。
ソートした結果を算出プロパティとして用意すれば、依存するデータが更新されるまでソート結果をキャッシュするため、処理が速くなります。

参照
【Vue.js】算出プロパティとメソッドの違い。どう使い分ければ良いの？

サンプル

参照
Vue JS 2 Tutorial #9 - Computed Properties

＊プログラム

＊コード
【メソッドの場合】

index.html

 <div id="vue-app">
    <h1>Computed Properties</h1>
    <button v-on:click="a++">Add to A</button>
    <button v-on:click="b++">Add to B</button>
    <p>A - {{ a }}</p>
    <p>B - {{ b }}</p>
    <p>Age + A = {{ addToA() }}</p>
    <p>Age + B = {{ addToB() }}</p>
  </div>

vue.js

 new Vue({
      el: "#vue-app",
      data: {
        age: 20,
        a: 0,
        b: 0
      },

      methods: {
        addToA: function() {
          console.log('addToA')
          return this.a + this.age;
        },
        addToB: function() {
          console.log('addToB')
          return this.b + this.age;
      }
    }
  });

【computedプロパティの場合】

index2.html

<div id="vue-app">
    <h1>Computed Properties</h1>
    <button v-on:click="a++">Add to A</button>
    <button v-on:click="b++">Add to B</button>
    <p>A - {{ a }}</p>
    <p>B - {{ b }}</p>
    <p>Age + A = {{ addToA }}</p>
    <p>Age + B = {{ addToB }}</p>
  </div>

vue2.js

 new Vue({
      el: "#vue-app",
      data: {
        age: 20,
        a: 0,
        b: 0
      },

    computed: {
      addToA: function() {
          console.log('addToA')
          return this.a + this.age;
        },
        addToB: function() {
          console.log('addToB')
          return this.b + this.age;
      }
    }

  });

コードだけ見ると、ほとんど変わらないことがわかるかと思います。
変わる箇所といえば、htmlのマスタッシュ内の書き方くらいです。

<p>Age + A = {{ addToA() }}</p>   <!-- メソッド -->
<p>Age + B = {{ addToA }}</p>   <!-- computedプロパティ -->

ディベロッパーツールで確認

しかし、ディベロッパーツールでそれぞれコンソールで確認してみてください。
(コード内にconsole.logを書いたのもそのためです)

「Add to A」、「Add to B」 いずれかのボタンをクリックすると、メソッドで書いたプログラムの場合(今回は「Add to A」をクリック)、AddToA、AddToB いずれも実行されているのがわかります。

一方computedプロパティで書いたプログラムの場合、「Add to A」ボタンをクリックすると、AddToA のみが実行されています。

まとめ

上記のサンプルコードで、computedプロパティの特徴である**「依存するデータが変更されたときのみ処理が行われる」**の部分が確認できたかなと思います。