Error: watch requires a source function, getter function or arrayの解決方法

このエラーはVue 3で`watch`関数を使用する際に、渡された最初の引数が無効な場合に発生します。主に、`watch`のソースとして適切な関数、getter、または配列が指定されていない場合が原因です。このエラーの発生条件と具体的な解決方法を詳しく解説します。

エラーの発生条件

• `watch`の最初の引数が関数ではない場合
• `watch`の最初の引数が配列ではない場合
• Vue 3のリアクティブデータオブジェクトにアクセスする際のミス

原因1: 無効なデータ型を渡した場合

`watch`に数値や文字列など無効なデータ型を渡すと、このエラーが発生します。

解決方法1: 関数やgetter関数を渡す

`watch`の最初の引数を関数やgetter関数にする必要があります。

import { ref, watch } from 'vue';

const count = ref(0);

watch(() => count.value, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

原因2: 直接的な値を渡した場合

`watch`に直接的な値（例: 数値や文字列）を渡すと、このエラーが発生します。

解決方法2: 値の代わりにgetter関数を使用

値を直接渡すのではなく、それを返す関数を渡します。

const name = ref("John");

watch(() => name.value, (newValue) => {
  console.log(`Name changed to ${newValue}`);
});

原因3: 配列で依存関係を指定していない場合

`watch`に複数の依存関係を渡す際に、配列で指定しないとエラーになります。

解決方法3: 配列で依存関係を指定

複数のデータを監視する場合は配列で指定します。

const firstName = ref("John");
const lastName = ref("Doe");

watch([firstName, lastName], ([newFirstName, newLastName]) => {
  console.log(`Name changed to ${newFirstName} ${newLastName}`);
});

原因4: `reactive`オブジェクトに直接アクセス

`reactive`オブジェクト全体を監視しようとするとエラーが発生します。

解決方法4: 特定のプロパティを監視

`reactive`オブジェクトのプロパティを指定して監視します。

import { reactive, watch } from 'vue';

const user = reactive({
  firstName: "John",
  lastName: "Doe"
});

watch(() => user.firstName, (newFirstName) => {
  console.log(`First name changed to ${newFirstName}`);
});

原因5: 無効な戻り値の関数を使用

ソース関数の戻り値が無効な場合、このエラーが発生します。

解決方法5: 有効な戻り値を持つ関数を使用

戻り値が適切なデータ型であることを確認します。

const isVisible = ref(true);

watch(() => isVisible.value, (newValue) => {
  console.log(`Visibility changed to ${newValue}`);
});

原因6: ミスで関数を定義しなかった場合

関数として渡すべきものが単なる式や変数になっているとエラーになります。

解決方法6: ソースを正しく関数として指定

無効な式や変数の代わりに関数を定義します。

const counter = ref(0);

watch(() => counter.value, (newValue) => {
  console.log(`Counter is now ${newValue}`);
});

原因7: 古いVue 2スタイルのコードを使用

Vue 2のスタイルで`watch`を使用すると、Vue 3ではこのエラーが発生する可能性があります。

解決方法7: Vue 3に適した方法で記述

Vue 3のComposition APIに対応した形式で書き換えます。

原因8: 配列の中で無効な値を指定

配列の中に無効なソースを含めるとエラーになります。

解決方法8: 配列の内容を確認

配列の中身が有効なgetter関数や値であることを確認します。

原因9: `watch`のスコープ外で値を参照

`watch`の外部でスコープ外の値を参照しているとエラーが発生します。

解決方法9: スコープ内で値を管理

`watch`内でスコープ外の値を適切に参照します。

まとめ

`watch requires a source function, getter function or array`エラーは、`watch`のソース指定が無効である場合に発生します。エラーを解決するには、関数、getter、または配列を正しく渡す必要があります。構文ミスやデータ型の誤りを一つずつ確認し、正しい形式で記述することで問題を解決できます。