Vue.js computedプロパティとwatchの使い方

computedプロパティ

動的な処理をプロパティとして持たせることができます。

<div id="app">
  <p>{{ number }}</p>
  <button @click="number += 1">+1</button>
  <p>{{ lessThanThree }}</p>
</div>
<script>
new Vue({
  el: "#app",
  data: {
    number: 0
  },
  computed: {
    lessThanThree: function () {
      return this.number > 3 ? '3より上' : '3より下'
    }
  },
})
</script>

methodとの違いについて

methodだとテンプレート内が少しでも再描画された際に実行されます。
ですが、computedの場合だと、表示されているかつ、プロパティ内部で参照している値が変更したときのみ、実行されます。
今回の例だと、「numberの中身が変わったときだけ」実行されることになります。めちゃくちゃ賢いですね。
そのため無駄な処理を省くことができます。

ウォッチャについて

基本的にはcomputedプロパティを使用したほうが良いですが、computedではまかないきれないときがあります。
例としては、画面に表示されていない場合などです。

そのようなときはウォッチャで実装することができます。
非同期通信などはウォッチャを使用する良い例です。

<div id="app">
  <p>{{ number }}</p>
  <button @click="number += 1">+1</button>
  <p>{{ lessThanThree }}</p>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    number: 0
  },
  computed: {
    lessThanThree: function () {
      return this.number > 3 ? '3より上' : '3より下'
    }
  },
  watch: {
    number: function () {
      var vm = this;
      setTimeout(function () {
        vm.number = 9999
      }, 3000)
    }
  }
})
</script>