Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

概要

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

※2019/9にブログに書いていた記事からの転記です

watchとは

vueのドキュメントの説明
vueのドキュメントの説明(API)

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

オプション

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

[vueのドキュメントの説明]https://jp.vuejs.org/v2/api/index.html#vm-watch

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関数にいつもの処理を書いてあげる必要があります。

所感

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

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