【Vue.js】computedがよく分からなかったので調べ直した

Vue.jsを使ってしばらく経ちますが
computed(算出プロパティ)とmethodsとwatchの違いを理解できていなかったので学習しなおしました
https://jp.vuejs.org/v2/guide/computed.html

computed(算出プロパティ)

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

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    //reversedMessageプロパティを定義
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

・他のプロパティの値を加工した結果などを保持しておけるプロパティ
・computed: オプション内にプロパティ名を書くことでプロパティを定義することができる。
・function()内には行う処理(計算、データの操作など)を定義し、結果をreturnする
・この例ではreversedMessageプロパティはvm.messageの値を使用している(messageに依存している)
→computedは依存しているデータに変更があった時に自動的に再計算を行い、reversedMessageの値を更新する。

methods

computedとmethodsの違い

・computed
データに何らかの計算処理をしたものをプロパティとして保持しておき、参照することができる
→結果をキャッシュしており、依存しているデータに変更がないときは計算・値の変更は行わない

・メソッド
呼び出した時に処理を行い、その結果を返すただのメソッド
→呼ばれればそのつど処理(計算)を行う

methodsではなくcomputedを使うメリット

・結果をキャッシュしており、必要な時のみ計算処理を行うので処理が早い
・プロパティとして定義することで可読性があがる

watch(監視プロパティ)

プロパティを監視し、データに変化があった時に何らかの処理を行うことができる
(メソッドを定義しておき、実行するタイミングを決めるイメージ)

・computedと同じ点
プロパティの変更に応じて処理を行うことができる

・computedと違う部分
処理を行うだけでreturnはしない

・どのように使い分けるのか？
多くの場合では算出プロパティを利用するほうが良いが、
非同期処理や処理を複雑な処理を行いたい時はwatchの方が適している

watch オプションを利用することで、非同期処理( API のアクセス)の実行や、処理をどのくらいの頻度で>実行するかを制御したり、最終的な answer が取得できるまでは中間の状態にしておく、といったことが可能になっています。これらはいずれも算出プロパティでは実現できません。