Vue.jsのwatchを使ってみる

Vue.jsのwatchを簡単に試してみます。

サンプルコード

例として、ボタンのクリックをカウントする処理で試してみます。

<div id="app">
  <button v-on:click="counter += 1">Add 1</button>
  <p>{{ computedFunc }}</p>
</div>

consoleを出す処理をcomputedと合わせて設定して、実行されるタイミングを確認してみます。
watchの使い方は、watchするdataの名前とそのdataに変更があった時に行う処理を定義するだけです。

var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  computed: {
    computedFunc: function () {
      console.log('computed');
      return this.counter;
    }
  },
  watch: {
    counter: function () {
      console.log('watch');
    }
  },
});

watchのデモページ
ボタンをクリックするとわかりますが、ページアクセス時にcomputedが実行される以外のタイミングは基本的に同じです。
computedを使用することが基本的には多いですが、computedはreturnで値を返す形になるので、処理後に値を返さない場合や非同期処理を行いたい時などにwatchを使用すると便利です。