概要

vue.jsのwatchにはdeepとimmediateという2つのオプションがあるのですが、書き方がちょっと特殊なのと、マニュアル上で探しにくくいので、癖があります。毎回ググってしまうので備忘録として残します。

概要
watchとは
オプション
- deep
- immediate
所感

watchとは

jp.vuejs.org

普通は算出プロパティ（computed）でいいんだけど、複雑な処理（重い処理？）の時はこっちの方が良いよ〜との事。

オプション

オプションについてはなぜかちょっと遠いところで、APIの中に記載があります。

jp.vuejs.org

deep

通常、objectのプロパティの変更は、watchが発火しません。

  data: () => ({
    someObject: {},
  )},
  watch: {
    someObject(newVal, oldVal) {
       console.log(newVal);
    },
  }
  methods: {
    onClick: function() {
      // watchが発火しない！
       someObject.hoge = 'hoge';
    },

deepをtrueにする場合はこう

  data: () => ({
    someObject: {},
  )},
  watch: {
    someObject: {
        deep: true,
        handler(newVal, oldVal) {
          console.log(newVal);
       },
    }
  }
  methods: {
    onClick: function() {
      // watchが発火する
       someObject.hoge = 'hoge';
    },

handlerという関数を書かないといけないのが唐突なので、いつも書き方忘れる、、、、

immediate

初期化のタイミングでもwatchが発火するようにしたい場合に使います。

これも、

  data: () => ({
    someObject: {hoge: 'piyo'},
  )},
  watch: {
    someObject: {
        immediate: true,
        handler(newVal, oldVal) {
          console.log(newVal);
       },
    }
  }