Vue.js・ウォッチャーについて

#VueJS

この記事を書いたチーム：frontier

はじめに
ウォッチャーのメリット
ウォッチャー使い方
実際の使用例
注意点

はじめに

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

Vue.jsのウォッチャー（watch）は、データの変化を監視し、変化があった際に処理を実行する機能です。

ウォッチャーのメリット

１；データの変化にリアルタイムで反応
　　→データが変更されると、それに応じてUIを更新、また別の処理を実行することができます。

２：複雑なロジックの分離
　　→データの変更に伴う処理を、テンプレートから切り離してウォッチャーに記述することで、コードの構造を整理し、可読性を向上させることができます。

３：非同期処理との連携
　　→データの取得や更新などの非同期処理と組み合わせて、より複雑なアプリケーションを構築することができます。

ウォッチャー使い方

ウォッチャーでは、Vueコンポーネントのwatchオプションを使用して定義します。

下記の例では、countプロパティが変更される度に、watchオプションで定義された関数が呼び出されます。関数には、新しい値(newValue)と古い値(oldValue)が引数として渡されます。

<template>
  <div>
    <p>カウント: {{ count }}</p>
    <button @click="increment">カウントアップ</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`カウントが ${oldValue} から ${newValue} に変更されました`);
      // 変更があったときの処理
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}
</script>