Vue3 watch プロパティ

Vue3 选项式 APIVue3 オプションAPI

Vue3 では、watchプロパティは、Vue インスタンス内の特定のデータの変化を監視し、データが変化したときに対応するコールバック関数を実行するために使用されます。

watchVue インスタンス内の特定のデータの変化を監視して応答し、DOM の更新やネットワークリクエストの送信などの副作用操作を実行できるようにします。

2. watch プロパティの基本用法

Vue3 では、watchプロパティは次の方法で使用できます：

実例

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count は $ から{oldValue}$ に変わりました{newValue}`);
    });

    return {
      count
    };
  }
};

3. コードの説明

上記のコードでは：

  • まず、私たちはrefを使用して、リアクティブデータを作成しましたcount、その初期値を 0 に設定しました。
  • 次に、私たちはwatch関数を使用してcountの変化を監視します。watch2つの引数を受け取ります：
    • 最初の引数は、監視したいデータです（ここではcount）。
    • 2番目の引数はコールバック関数で、監視しているデータが変化すると、このコールバック関数が呼び出されます。コールバック関数は2つの引数を受け取ります：
      • newValue：データ変化後の新しい値。
      • oldValue：データ変化前の古い値。

4. watch プロパティの高度な使い方

単一のデータを監視するだけでなく、watch複数のデータや複雑な式を監視することもできます。

4.1 複数のデータを監視する

実例

import { ref, watch } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
      console.log(`firstName は $ から{oldFirstName}$ に変わりました{newFirstName}`);
      console.log(`lastName は $ から{oldLastName}$ に変わりました{newLastName}`);
    });

    return {
      firstName,
      lastName
    };
  }
};

この例では、私たちが監視したのはfirstNameとlastName2つのデータの変化です。

4.2 複雑な式を監視する

実例

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Alice',
      age: 25
    });

    watch(
      () => user.value.age, // user.age の変化を監視する
      (newAge, oldAge) => {
        console.log(`age は $ から{oldAge}$ に変わりました{newAge}`);
      }
    );

    return {
      user
    };
  }
};

この例では、私たちは関数を使用してuser.ageの変化を監視しています。

5. watch プロパティのオプション

watch関数はさらに第3引数を受け取ります。これはオプションの設定オブジェクトで、監視の動作をカスタマイズするために使用できます。

実例

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count は $ から{oldValue}$ に変わりました{newValue}`);
    }, {
      immediate: true, // コールバック関数を即時実行する
      deep: true // ディープウォッチ。オブジェクトまたは配列の監視に適しています。
    });

    return {
      count
    };
  }
};
  • immediate: true：監視開始時にコールバック関数をすぐに実行することを示します。データが変化するのを待つのではなく、即座に実行します。
  • deep: true：ディープウォッチを表します。オブジェクトや配列の変化を監視する場合に適しています。

Vue3 选项式 APIVue3 オプションAPI

その他の拡張