もやぶろ

moyashidaisukeのブログだからもやぶろ。フリーランスのエンジニアのダイスケです。プログラム関連とかギター関連とか旅行関連とか色々。

【vue】わかりにくいvue.jsのwatch(ウォッチャ)のオプションを使った書き方

概要

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

watchとは

jp.vuejs.org

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);
       },
    }
  }

という感じで、handler関数にいつもの処理を書いてあげる必要があります。

所感

なんでここだけマニュアルわかりにくいんだろ、、、