【Vue3】watchオプションとは？使い方を紹介する

vuejsのwatchとは

dataやpropsなどの値が変更された時に別の処理を実行したいことがあると思います。そんなときにはwatchオプションを使います。

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

watchオプションの使い方

以下のように書いてきます。

<script>
export default {
  data () {
    return {
      task: 'study'
    }
  },
  watch: {
    task: {
      handler(newValue, oldValue) {
        console.log('task changed')
      }
    }
  }
}
</script>

deepオプションで配列やObjectの変更を監視する

配列やオブジェクトをwatchで監視している場合、Vue3では基本的にまるごと置き換えられたときしか反応しません。 配列やオブジェクトに値を足したり、削るなどの「変更」では、watchは反応しません。

もし、配列やオブジェクトの値の変更も監視したい場合はdeepオプションをつける必要があります。

watch: {
  todoList: {
    handler(newValue, oldValue) {
      console.log('todo list changed')
    },
    deep: true
  }
}

immediateオプション

immediateオプションは、監視が開始した直後に一度コールバックが呼び出されるオプションです。 immediateのタイミングでhandlerが呼び出された場合はunwatchが使えないことに注意してください。 unwatchは値の監視をやめる関数のことです。

watch: {
  task: {
    handler(newValue, oldValue) {
      console.log('task changed!')
    },
    immediate: true
  }
}

propsをwatchで監視する

watchオプションではpropsも監視することができます。

<template>
  <p>
    task: {{ task }}
  </p>
</template>

<script>
  export default {
    props: {
      task: String
    },
    watch: {
      task: {
        handler(newValue, oldValue) {
          console.log('task chenged!')
        }
      }
    }
  }
</script>

Vue SFC Playgroundはこちら

computedとwatchの使い分け

watchと似た処理にcomputedがあります。

それぞれ以下のような特徴があります。

  • computedはリアクティブな値を加工してtempleteで表示するのに向いている
  • watchは外部APIからデータを取得して表示するようなコストの高い処理を行うのに向いている

公式ではcomputedで問題ないのであればcomputedを利用することが推奨されているようです。

算出プロパティとウォッチャ | Vue.js