watch データ変化の監視（Options API）
最終更新：2026-10-22
watch データ変化の監視（Options API）
watch オプションは、監視するデータ名をキーとしてコールバックを整理します。handler、deep、immediate、文字列によるメソッド名の省略記法をサポートします。
| グループ | オプション: 状態 |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
data() { return { keyword: "" } },
watch: {
keyword(newVal, oldVal) { /* ... */ },
"user.name"(v) { /* quote nested paths */ }
}
}⚙️ 引数
| value | オブジェクト：キーはデータのパス（ドットを含むネストパスはクォートで囲む）、値は関数または { handler, deep, immediate } |
|---|
戻り値：戻り値なし。コールバックは (新しい値, 古い値) を受け取ります
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Typing logs 'old → new', for example 'a → ab'.💡 ポイント
💡 ヒント デフォルトでは遅延実行です。初期化時にも実行したい場合は immediate: true を追加します。
⚠️ 注意 オブジェクト内部のフィールドを監視するにはクォート付きキーか deep: true を使います。deep のコストはオブジェクトが大きいほど増えます。
ℹ️ 補足 文字列形式 'methods 内のメソッド名' で、既存のメソッドをハンドラーとして再利用できます。
🏷️ 関連状態
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q Composition API の watch との関係は？
A 同じ仕組みの2つの書き方です。Options API はデータ名をキーに、Composition API はソースとコールバックを明示的に渡します。
Q 配列全体の変化を監視するには？
A 配列の置き換えはトリガーされます。その場での push には deep: true か length の監視が必要です。
Q 複数を同時に監視できますか？
A 複数のキーをそれぞれ書くか、Composition API の watch([a, b]) でまとめて処理します。
