More than 3 years have passed since last update.

Vueのwatchで同時に複数の値を監視するTips

Posted at 2021-02-17

はじめに

最近Vueを触ることがあって、面白いなと思ったので紹介します。Vueをあまり使い慣れていないので、書き方間違っていたらごめんなさい

下のようにwatchでhogeとfugaという値を監視していて、それぞれが更新された時に同じ処理をする場合があります。

// hogeとfugaで同じ処理

watch: {
 hoge() {
  // 何らかの処理
 },
 fuga() {
  // hogeと同じ何らかの処理
 },
}

このとき、以下のようにして、2つの処理をまとめることができます。

computed: {
 hoge_fuga() {
  return `${this.hoge}_${this.fuga}`;
 }
},
watch: {
 hoge_fuga() {
  // 何らかの処理
 }
}

hogeとfugaのどちらかが変更されると、computedに定義したhoge_fugaが更新され、hoge_fugaをwatchで監視しているので処理が実行されます。
とても単純ですが、面白いなと思いました。

読んでいただきありがとうございます！少しでも役立ったら嬉しいです！