Help us understand the problem. What is going on with this article?

$watchでオブジェクトの変更を監視する方法

More than 1 year has passed since last update.

はじめに

Vue.jsで生成したオブジェクトは$watchというメソッドを持っています。
これによりデータの変更を監視することが可能になります。
しかし、$watchメソッドは、オブジェクトの追加や削除を検出してくれますが、
オブジェクトの値が変更された場合は検出しません。😢

次のような例をみてください。
(※例ではVueインスタンスのwatchオプションに設定していますが、インスタンス化したときにオブジェクトの各エントリに対して$watchメソッドが呼び出されます)

<script>
  export default {
    data () {
      return {
        someObj: {
          a: 'obj-a',
          b: 'obj-b',
          c: 'obj-c'
        }
      }
    },
    watch: {
      someObj: function (val, oldVal) {
        console.log('someObj changed')
      }
    }
  }
</script>

この場合、オブジェクトデータsomeObjの中のネストされた値(someObj.a,someObj.b,someObj.c)が変更されても、
watchオプションでは検出してくれません💦
オブジェクトの変更を検出するには、以下の方法があります😇

オブジェクトを丸ごと監視したい場合(ネストしたデータも監視したい場合)

<script>
  export default {
    data () {
      return {
        someObj: {
          a: 'obj-a',
          b: 'obj-b',
          c: 'obj-c'
        }
      }
    },
    watch: {
      someObj: {
        handler: function (val, oldVal) {
          console.log('someObj changed')
        },
        deep: true
      }
    }
  }
</script>

options引数にdeep: trueを渡すことで、
オブジェクトの中のネストされた値の変更を検出することができます。
※監視する際のコールバック処理はhandlerに記述します。

オブジェクトを個々に監視したい場合

<script>
  export default {
    data () {
      return {
        someObj: {
          a: 'obj-a',
          b: 'obj-b',
          c: 'obj-c'
        }
      }
    },
    watch: {
      'someObj.a': function(val){
        console.log('someObj.a changed');
      },
      'someObj.b': function(val){
        console.log('someObj.b changed');
      },
      'someObj.c': function(val){
        console.log('someObj.c changed');
      }
    }
  }
</script>

watchのキーを'someObj.a'のようにクォーテーションで囲うことで、
それぞれのプロパティを個々に監視することができます。

まとめ

多くの場合では、データの変更を監視するには算出プロパティの方が適切だと思うのですが、
中にはカスタムウォッチャが必要な時もあると思います✌️
データの変更に対して反応する、watchオプションはとても汎用性が高く便利ですね😇

_Keitaro_
2015.12からWEB制作会社で、主にWEBシステム開発の仕事をしています。
karabiner
主にシステム開発・アプリ開発・ Webサイト制作を行う会社です
http://www.karabiner.tech/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away