【Vue.js】算出プロパティのキャッシュ

#はじめに
こんにちは！
今回は【Vue.js】算出プロパティのキャッシュについてアウトプットしていきます！

#キャッシュとは
・cpmputed・・・キャッシュされる（依存関係に元付きキャッシュされる）
・methods・・・キャッシュされない

#書き方・解説
ランダムの数字を返す処理をcpmputedとmethodsで記述。

HTML

<div id="app">
  <h2>
    Computed
  </h2>
  <ol>
    <li>{{ computedNumber }}</li>
    <li>{{ computedNumber }}</li>
    <li>{{ computedNumber }}</li>
    <li>{{ computedNumber }}</li>
  </ol>
  <h2>
    Methods
  </h2>
  <ol>
    <li>{{ methodsNumber() }}</li>
    <li>{{ methodsNumber() }}</li>
    <li>{{ methodsNumber() }}</li>
  </ol>
</div>

Vue.js

var app = new Vue({
  el: '#app',
  computed: {
    computedNumber: function() {
    console.log('computed!')
      //⏫動作確認
      return Math.random()
      //⏫ランダムな数字を生成できる
      }
    },
    methods: {
      methodsNumber: function() {
      console.log('methods!')
        return Math.random()
      }
    } 
})

cpmputedとmethodsを記述します。処理内容は全く一緒です。
上記のようにcpmputedは全く同じ数字（キャッシュされている）、methodsは全て異なる数字（キャッシュされない）という風な特性があるからこうなります。

算出プロパティのキャッシュの再構築のトリガーとなるのはリアクティブなデータのみです。Math.random()関数はリアクティブではないので、複数回よんでもキャッシュされたデータか使われて同じ値が返される。

#まとめ
cpmputedはキャッシュされ全く同じ値が出力される。console表示は１回のみ。
methodsはキャッシュされないので全て異なる値が出力される。console表示は表示された値の数と一緒。

#最後に
今回は算出プロパティのキャッシュについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！