【Vue.js】computedとwatchの違い・使い分け

はじめに

前回の記事では【Vue.js】computedとmethodsの違いまとめでは、computedとmethodsの違いについてアウトプットしました。本記事ではcomputedとwatchの違いについてアウトプットします。

watch プロパティとは

特定のデータまたは computed プロパティの状態を監視して、変化があったとき登録した処理を自動的に実行するものです。
データの変更を監視して、それをトリガーに非同期処理や複雑な処理を行う必要がある時に使えます。

書き方

コンポーネントの watch オプションに、監視するデータの名前と変化したときに呼び出されるハンドラを定義します。

比較をしたい場合、第 1 引数として「新しい値」と、第 2 引数として「古い値」を受け取れます。

ウォッチャの定義では、次のオプションを任意に設定できます。

deep(任意): ネストされたオブジェクトも監視する
immediate(任意) : 初期読み込み時にも呼び出す

watch:  {
   変更を監視するプロパティ名: {
     handler: function (変更後の値, 変更前の値) {
       //ここに処理内容を記述
   },
     [deep: 真偽値,] // => trueの場合、ネストされたオブジェクトも監視
     [immediate: 真偽値,] // => trueの場合、初期読み込み時にも呼び出す
 }
}

computed プロパティとの違い

同様のプロパティとして computedプロパティがあります。computed プロパティが使える場合には、簡潔に記述できるためそちらの方が適切です。しかし、上記のように非同期通信のアクセスをするなど、より複雑で汎用的な処理をする場合にはwatchプロパティが便利です。以下は、watchプロパティを使うべきケースです。

・computed プロパティでは処理できない非同期通信などの複雑な処理を行う場合
・更新前と更新後の値を使う場合
・処理を実行しても、データは返さない場合

実装例

watch プロパティの場合

const Vue = new Vue({
  el: '#app',
  data: {
    num1: 5,
    num2: 4,
    sum: 20,
  },
  watch: {
    num1: function (value) {
      this.sum = val * this.num2;
    },
    num: function (value) {
      this.sum = this.num1 * val;
    },
  },
});

computed プロパティの場合

const Vue = new Vue({
  el: '#app',
  data: {
    num1: 5,
    num2: 4,
  },
  computed: {
    sum: function () {
      return this.num1 * this.num2;
    },
  },
});

上記ケースの場合は computedプロパティでの記述の方が、簡潔で可読性の高いコードとなります。そのため、computedプロパティで記述できる場合にはcomputed プロパティを採用し、API にアクセスする非同期処理を実装する場合はwatchプロパティを採用するなどの使い分けが必要となります。

参照

Vue.js :Computed Properties and Watchers