【Vue.js】watch()でデータの変更を監視する方法

Vue.jsのwatch()は、データの変更を監視して自動的に処理を実行する便利な機能です。この記事では、watch()の基本的な使い方から応用的なオプションまで、詳細に解説します。

watch()とは？

watch()は、Vue.jsで特定のデータやプロパティの変化を監視し、その変化に応じて関数を実行するためのメソッドです。フォームの入力値の変更や、非同期処理を行う際に非常に役立ちます。

基本的な使い方

まずは、watch()の基本的な構文と使い方を見てみましょう。

watch: {
  someData(newValue, oldValue) {
    // 'someData'が変更された時の処理
  }
}

someDataというデータが変更されたときに、newValueとoldValueという引数が渡されます。これにより、値の変化前後の情報を使って様々な処理を行うことができます。

カウントの変更を監視

次に、countというデータが変更された際に、その変化を監視してメッセージを表示する例を紹介します。

<template>
  <div>
    <p>現在のカウント: {{ count }}</p>
    <button @click="increment">インクリメント</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: ''
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  watch: {
    count(newValue, oldValue) {
      this.message = `カウントが ${oldValue} から ${newValue} に変わりました`;
    }
  }
};
</script>

この例では、ボタンをクリックしてcountの値が変更されるたびに、watch()によってmessageが更新されます。

複数のプロパティを監視する

複数のプロパティやネストされたプロパティもwatch()で監視することができます。たとえば、フォームの住所データを監視する場合は次のように書けます。

watch: {
  'formData.address.city': function(newVal, oldVal) {
    console.log(`都市が ${oldVal} から ${newVal} に変更されました`);
  }
}

また、deep: trueオプションを使用することで、オブジェクトの深い階層まで監視できます。

immediateオプション

通常、watch()はデータが変更されたときに初めて実行されますが、immediate: trueオプションを設定することで、コンポーネントがマウントされた直後に一度だけ監視関数が実行されます。

watch: {
  count: {
    handler(newValue, oldValue) {
      console.log('カウントが変更されました');
    },
    immediate: true
  }
}

これにより、初期状態でもwatch()を発火させたい場合に便利です。

まとめ

Vue.jsのwatch()を使うことで、データの変化に応じた動的な処理を簡単に実装できます。フォームのバリデーションやAPIコールなど、様々な場面で役立つため、プロジェクトでの活用を検討してみてください。