Vue.jsで動的なデータ変更を検知する方法：watchの活用

Vue.jsのwatchは、Vueインスタンスのデータが変更されたときに、その変更を検知して特定の動作を実行するために使用される非常に便利なオプションです。watchは、データの変更に応じて非同期処理を行う場合や、データの変更が他のデータや状態に影響を与える場合に特に有効です。

基本的な使い方

watchを利用するには、Vueインスタンス内にwatchオプションを定義し、監視したいデータプロパティ名をキーとして、そのプロパティが変更されたときに実行される関数を値として設定します。この関数は通常、新しい値と古い値の両方を引数として受け取ります。

使用例

ここでは、ユーザーの入力を監視し、入力が変更されたときに何か処理を行う簡単な例を示します。

HTML部分

<div id="app">
  <input v-model="userInput">
  <p>{{ feedback }}</p>
</div>

Vueインスタンス部分

new Vue({
  el: '#app',
  data() {
    return {
      userInput: '',
      feedback: ''
    }
  },
  watch: {
    userInput(newVal, oldVal) {
      if (newVal.length > 10) {
        this.feedback = '10文字を超える入力はできません';
      } else {
        this.feedback = '';
      }
    }
  }
});

この例では、input要素に入力された値がuserInputにバインドされています。userInputが変更されるたびに、watchに定義された関数が実行され、入力された文字数が10文字を超えるとフィードバックメッセージが表示されます。

Composition APIでのwatch

Vue 3のComposition APIを使用する場合、watchを使う方法もあります。これはsetup関数内でwatch関数を使用することで実現します。

使用例

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const userInput = ref('');
    const feedback = ref('');

    watch(userInput, (newVal, oldVal) => {
      if (newVal.length > 10) {
        feedback.value = '10文字を超える入力はできません';
      } else {
        feedback.value = '';
      }
    });

    return { userInput, feedback };
  }
}
</script>

この例では、Composition APIのrefとwatchを使用して、同様の機能を実装しています。refを使用してreactiveな変数を定義し、watchでこれらの変数の変更を監視しています。これにより、Vue 3でのデータフローの管理がより柔軟になります。