Vue3のウォッチャーを見てみる

Vue.js 3 の watch と watchEffect について

Vue.js 3には、リアクティブなデータを監視して何らかの処理を実行するための2つの主な機能があります。それらはwatchとwatchEffectです。以下でそれぞれの特徴と使い方について解説します。

watch の基本

watchは、指定したリアクティブなプロパティまたは計算プロパティの変更を監視し、その変更に応じて処理を実行します。

特徴

・監視するプロパティを明示的に指定します。
・以前の値と新しい値の両方を取得することができます。

例

import { watch } from 'vue';

watch(someRef, (newValue, oldValue) => {
  console.log('新しい値:', newValue, '以前の値:', oldValue);
});

watchEffect の基本

watchEffectは、実行中にアクセスしたすべてのリアクティブなプロパティの変更を自動的に監視します。

特徴

・明示的な指定が不要で、自動的に依存するプロパティを追跡します。
・watchとは異なり、以前の値にアクセスする機能は提供されていません。つまり、変更前の値を知ることができないため、新旧の値を比較するような処理は行えません。

例

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log('変更された値:', someRef.value);
});

使用例とソースコード

以下の例では、ユーザーが選択した商品の価格を監視し、合計価格を計算します。

import { ref, watch, watchEffect } from 'vue';

export default {
  setup() {
    // 商品の価格
    const productPrice = ref(100);

    // 合計価格
    const totalPrice = ref(0);

    // watchを使用して価格の変更を監視
    watch(productPrice, (newValue, oldValue) => {
      console.log('価格が更新されました:', newValue);
      totalPrice.value = newValue * 10; // 10個購入する例
    });

    // watchEffectを使用して価格の変更を自動的に監視
    watchEffect(() => {
      console.log('合計価格:', totalPrice.value);
    });

    return {
      productPrice,
      totalPrice
    };
  },
};

以上で、Vue.js 3のwatchとwatchEffectについての解説を終了します。この2つの機能を使うことで、データの変更に素早く反応し、動的なアプリケーションを構築することが可能になります。最初は少し複雑に感じるかもしれませんが、実際に手を動かして試してみると理解が深まるでしょう。

注意

watchとwatchEffectはComposition APIの一部であり、Vue.js 3以降で利用できます。
どちらの機能も監視の対象となるプロパティが変更されたときにのみ処理が実行されるため、コードの効率を高めることができます。