【Vue.js】watch(ウォッチャ)の使い方を具体例付きで解説

今回はVue.jsのwatch(ウォッチャ)について解説していきます。

watchを使えるようになると、複雑な処理を自動化できたり、実装の幅が広がるので是非使えるようになりましょう。

vue.jsにおけるwatchとは？

watch（ウォッチャ）とは特定のdata(データ)やcomputed(算出プロパティ)の状態を監視して、何か変化があった時に予め登録しておいた処理を自動的に実行してくれる仕組みのことです。

監視対象に変化が起きたら、登録した処理を自動で行ってくれる物という理解でOKです。

watch（ウォッチャ）の使い方

オブジェクトを監視する

<script> export default {     data() {       return {         someObject: {}       }     },     watch: {       someObject: function(val, oldVal) {         console.log('someObject changed!!')       }     }   } </script>

ここではデータで定義したsomeObjectというオブジェクトをwatchで監視しています。

someObjectに何か変化が加わるたびにwatchが実行され、'someObject changed!!'という文字列が出力されます。

基本の書き方は、以下のとおりです。

watch: {
  監視するデータ: function(新しい値, 古い値) {
    //監視対象が変化した時に自動で行う処理をここに記述
  }
}

オブジェクトのプロパティを監視する

<script> export default {     data() {       return {         someObject: {           name:"",           id: ""         }       }     },     watch: {       'someObject.name': function(val, oldVal) {         console.log('someObjects name changed!!')       }       'someObject.id': function(val, oldVal) {         console.log('someObjects id changed!!')       }     }   } </script>

この例ではsomeObjectにnameプロパティとidプロパティを追加しています。プロパティの個別の変化を監視するには'someObject.name'のようにクォーテーションで囲って指定します。

オブジェクト全体（プロパティも含む）を監視する

<script> export default {     data() {       return {         someObject: {           name:"",           id: ""         }       }     },     watch: {       someObject: {         handler: function(val, oldVal) {           console.log('someObject changed!!')         },         deep: true       }     }   } </script>

オプションにdeep:trueとすることで、オブジェクトのプロパティの変化も含めて監視できます。

オプションを指定するときだけ、関数の登録をhandlerとしてから書かなければいけないので注意です。

インスタンスメソッドで登録する

コンポーネントでwatchで登録する方法以外にも、インスタンスメソッド「this.$watch」を使うことで他のメソッド内でも使用する事ができます。

created: function() {
  this.$watch('value', function(newVal, oldVal) {
  //実行したい処理
 })
}

この例ではライフサイクルのcreatedフックに登録しています。今までの書き方とは少し異なりインスタンスメソッドで登録する際には、以下のように引数を渡します。

this.$watch('監視したいデータ', 実行したい処理の関数, オプション )

computedとの使い分け

watchは便利な機能ですが、computedで実現できる処理はcomputedを使うことが適切とされています。

しかし、非同期処理(APIアクセス)の実行などのwatchでしかできない処理や、重い処理を行う場合はwacthを使うのが適切なようです。

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

Vue.js - The Progressive JavaScript Framework

jp.vuejs.org

最後に

watchの概念は書き方さえ覚えれば、そこまで難しくないと思います。複雑な処理の実装などの幅が広がるかも知れません。

Vue.jsについてもっと詳しく学びたい人は以下の書籍が入門書としておすすめです。

基礎から学ぶVue.js

mio

Amazonで探す

Kindleで探す

楽天で探す