{{ Vue tips }} watchのimmediateオプション

Vue.jsの小ネタです。

これはこんな風にも書けるよ、というお話です

Routerを含んだSPAを開発する際、以下のような記述をすることがあると思います。

created () {
  this.fetchData()
},
watch: {
  $route () {
    this.fetchData()
  }
}

fetchData はページごとに必要なデータを取得する（そしておそらく data のプロパティに代入する）メソッドだと思ってください。コンポーネントが初期化される時にデータを取得したいので created で fetchData を呼び出します。さらに、$route の値を watch して変更があったタイミングでも fetchData を呼び出さなくてはなりません。

というのも、例えば /posts/123 から /posts/987 に遷移したとき、つまり遷移先も同じコンポーネントである場合は、Vueの内部ではインスタンスをなるべく使いまわそうとするので created が呼ばれないのです。$route の値を watch しないと、URLは変わっているのにデータが変わらない状態になってしまうのですね。

さて、上記のコードは以下のように書き換えられます。

watch: {
  $route: {
    handler: 'fetchData',
    immediate: true
  }
}

ちょっとスッキリしました

watch の値はオブジェクトを取ることもできます。その場合、handler に関数を指定するのですが、関数の指定は関数名（文字列）でも構いません。そして immediate を true にすると、handler に指定した関数がすぐに実行されます。つまり created で呼び出すのと同じことになるわけです。

マニュアル
https://jp.vuejs.org/v2/api/index.html#vm-watch

以上です。