【Vue】wacthの使い方を解説！wacthを使ってURLの変更を検知

Vue wacthとは？

watchは特定のデータや算出プロパティの変化を監視して、変化があったときに登録した処理を実行するプロパティです。

値が変わったときに、クラスを付与したり、表示非表示の切り替えを行いたいときはwatchプロパティを使います。

環境とバージョンについて

• mac OS 11.2.3
• エディタ　VSCode
• node v14.8.0
  • https://nodejs.org/ja/
• npm 6.14.7
  • https://www.npmjs.com/

Vue watchの使い方

基本的な使い方は下記のとおりです。

watch: {
	監視するデータ: function(新しい値, 古い値) {
	  // データが変化した時に行いたい処理
	}
},

questionの値が変わるごとに実行するwatchの関数

data: {
  question: '',
  answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
  // この関数は question が変わるごとに実行されます。
  question: function (newQuestion, oldQuestion) {
    this.answer = 'Waiting for you to stop typing...'
    this.debouncedGetAnswer()
  }
},

v-modelを使って、questionの値を変えたときには、question: function・・・が実行されます。

vue watchでURLの変更を検知

URLの変更を検知したいときは、$routeを使うことで検知することができます。

watch: {
    $route(to) {
      this.url = to.path
	    this.checkUrl(this.url)
    },
},

上記では現在のURLが変更されたときに、遷移先のURLをthis.urlに追加したあとにthis.checkUrlの関数に現在のURLを渡します。

関数に現在のURLを渡すことで、URLごとに挙動を変えることができます。

まとめ

• 第1引数に監視したい変数を入れて、第2引数に行いたい処理を関数で書きます。
• URLの変更を検知したい場合は、$routeを使う

おすすめの参考書