https://qiita.com/yukibe/items/f49fcb935363200916fe

computed

算出プロパティ
- 以下のような可読性の悪いテンプレート内のコードをすっきりさせる

↓before

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

↓after

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

...

<script>
export default {
    computed: {
        // 算出 getter 関数
        reversedMessage: function () {
          // `this` は vm インスタンスを指します
          return this.message.split('').reverse().join('')
        }
     }
}
</script>

リアクティブな依存関係にもとづきキャッシュされる
- data()内のデータが変わってもキャッシュされた値を取得してくるので、再描画されない
- 参考記事の例を見るとわかりやすい
  - dataに定義されているfirstNameとlastNameが変更されるたびに、コンポーネント内のテンプレートは再描画されるが、nowは初回読み込み時の値をキャッシュしたモノを取得してくるので、変更されない

methods

computedの逆で、リアクティブな依存関係にもとづきキャッシュされないのがmethods
これまた参考記事の例を見るとわかりやすい
- computedとの比較で今回はfirstNameとlastNameが変更されるたびに、nowは再描画され、現在時刻を返す（＝表示する）
一般的には「メソッド呼び出しは、再描画が起きると常に関数を実行する」と言われる