Vue.js computedとmethodの違い #Vue.js

この記事は初心者向け Vue.jsでcomputedとmethodsの違いについて記述した自分用メモになります。
誤っている点がありましたらご指摘をお願いいたします。

この記事は以下の方向けの記事となっております。

推定読者：
・computedとmethodのそれぞれの使い方は分かるが、２つの違いが分からない人
・どんな時にどちらを使えばいいのか分からない人

computedとmethodの違い

computedとmethodの違いは「キャッシュされるかどうか」です。
computedはキャッシュされ、methodはキャッシュされません。つまり、computedとmethodsは実行されるタイミングが異なります。

computedは参照先の値が変わった時のみ実行され、methodsはテンプレートの中身が再描画される度に実行されます。
この違いがどのような差をうむのかを以下に記述します。

キャッシュされるcomputedとキャッシュされないmethodsの違い

以下、全く同じ値を返すcomputedとmethodです。

    <button @click="counter += 1">カウンター</button>
    <button @click="otherCounter += 1">他のカウンター</button>
    <p>{{ otherCounter }}</p>
    <p>{{ counterMethod() }}</p>
    <p>{{ counterComputed }}</p>

 <script>
new Vue({
   el: '#app',
   data: {
     counter: 0,
     otherCounter: 0
   },
   methods: {
     counterMethod() {
          console.log('methodが実行されました')
          return this.counter > 2 ? '2より大きい': '2より小さい' 
      }
   },
   computed: {
     counterComputed() {
          console.log('computedが実行されました')
          return this.counter > 2 ? '2より大きい': '2より小さい'
      }
   }
 })
</script>

上記のコードはカウンターボタンが押された時、counterの値が１足され、足された値に対してmethodとcomputedがそれぞれ2より大きい値かどうかを返すという内容になっております。
また、cmethodとcomputedが実行されるタイミングが分かるようconsole.logで実行タイミングを見れるようにしています。

では、カウンターボタンを3回クリックしてみましょう。

実行結果

赤枠で囲ったconsole.log結果に注目してください。
methodとcomputedの両方が実行されていることが分かります。

では、次に他のカウンターボタンを３回クリックしてみましょう。
実行結果

赤枠で囲ったconsole.log結果に注目してください。
methodだけが実行されていることが分かります。

以上の結果から、
・methodは全く関係ない要素の変化であってもテンプレートが再描画される度に実行
・computedは関係する要素（参照している要素）が変化した場合のみ実行
上記２点のタイミング差による違いがわかりました。

参照したサイトさま

この記事を書くにあたり参照したサイト様、記事一覧です。

りんごとバナナとエンジニア/【Vue.js】computedとmethodsの違い

udemy教材
超Vue JS 2 入門完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)