0Pricing
Frontend Academy · レッスン

computed() と watch()

computed() で値を遅延評価し、watch() と watchEffect() で状態変更に反応し、flush のタイミングを制御します。

「computed() と watch()」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Composition APIのcomputed()

computed(fn)は、他のリアクティブなソースから値を導出する読み取り専用のリアクティブrefを作成します。キャッシュされるため、getterは依存関係が変化したときにのみ実行されます。

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

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

書き込み可能なcomputed()

getとsetを持つオブジェクトを渡すと、書き込み可能なcomputedを作成できます。setterが更新を処理し、通常は変更を元のrefに反映します。

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

watch()の基本

watch(source, callback)は、sourceが変更されたときにcallbackを実行します。callbackは新しい値と古い値を受け取ります。

import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log(`Changed from '${oldVal}' to '${newVal}'`);
  searchAPI(newVal);
});

refとreactiveの監視

refは直接監視します。リアクティブなプロパティを監視するには、getter関数() => state.propを使用します。

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

深い監視

{ deep: true }を渡すと、オブジェクトref内のネストされた変更を監視できます。

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

即時監視

{ immediate: true }を渡すと、変更が発生する前に、セットアップ時にcallbackをすぐ実行できます。初期値を使って副作用を実行したい場合に便利です。

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn)はcallbackをすぐに実行し、その内部で使用されているリアクティブな依存関係が変更されるたびに再実行します。ソースを明示的に指定する必要はありません。

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffectとwatch

watchEffectは、すぐに実行され、依存関係を自動追跡し、古い値にはアクセスできません。watchは、ソースを明示的に指定し、デフォルトでは遅延実行され、新旧両方の値にアクセスできます。宣言的な副作用にはwatchEffectを使用し、実行のタイミングや頻度を制御する必要がある場合はwatchを使用します。

ウォッチャーの停止

watchとwatchEffectは、どちらもstop関数を返します。呼び出すと監視を停止できます。