備忘録としてのメモです。

computed

算出プロパティ
リアクティブな依存関係に基づいてキャッシュされる
リアクティブな依存関係が更新されたときにだけ再評価され、依存がない場合は更新されない

以下、リファレンスより

Vue インスタンスに組み込まれる算出プロパティ (Computed property) です。すべての getter や setter は、自動的に Vue インスタンスに束縛された this コンテキストを持ちます。

算出プロパティはキャッシュされ、そしてリアクティブ依存が変更されたときにだけ再算出します。ある依存関係がインスタンスのスコープ外の(つまりリアクティブではない)場合、算出プロパティは更新されないことに注意してください。

methods

よくあるメソッド
再描画が起きる度に実行される

以下、リファレンスより

Vue インスタンスに組み込まれるメソッドです。VM インスタンスでは、これらのメソッドに直接アクセスでき、ディレクティブの式で使用することもできます。すべてのメソッドは、Vue インスタンスに自動的に束縛された this コンテキストを持ちます。

watch

監視プロパティ
定義済のプロパティを監視し、変更があった場合に実行される

以下、リファレンスより

キーが監視する評価式で、値が対応するコールバックをもつオブジェクトです。値はメソッド名の文字列、または追加のオプションが含まれているオブジェクトを取ることができます。Vue インスタンスはインスタンス化の際にオブジェクトの各エントリに対して $watch() を呼びます。

サンプル

Aコースへ応募するボタン（computed）を押すと、関係のないBコースへの応募ボタン（methods）も呼ばれてしまうことがわかります。
逆に、Bコースへの応募ボタン（methods）を押した時は、Aコースへ応募するボタン（computed）は呼ばれません。
また、Aコースの応募数のを監視（watch）し、5秒後にカウントがリセットされることも確認できました。

<div id="support">
  <p>現在のAコースへの応募数: {{ countA }}</p>
  <p>現在のBコースへの応募数:  {{ countB }}</p>
  <br>
  <p>現在の状態（computed）{{ computedResult }}</p>
  <p>現在の状態（methods） {{ methodsResult() }}</p>
  <br>
  <button @click="countA ++">Aコースに応募する</button>
  <button @click="countB ++">Bコースに応募する</button>
</div>

new Vue({
  el: "#support",
  data: {
    countA: 0,
    countB: 0
  },
  computed: {
    computedResult: function() {
        console.log('Aコースへの応募を受付');
        return this.countA > 5 ? '応募は締め切りました' : '応募受付中です'
    }
  },
  methods: {
    methodsResult: function() {
        console.log('Bコースへの応募を受付');
        return this.countB > 5 ? '応募は締め切りました' : '応募受付中です'
    }
  },
  watch: {
    countA: function() {
        var vm = this;
      setTimeout(function(){
        vm.countA = 0
      }, 5000)
    }
   }
})

Vue.jsでのmethods, computed, watchの使い分け

computed

methods

watch

サンプル