Vue watch

Definition

watch は、特定のリアクティブ state の変化を監視し、その変化を契機に副作用を実行するための API である。

Why It Matters

初学者は watch を「何でもできる便利 API」として使いがちだが、それをやると状態設計が崩れる。computed と watch の責務差を整理するには watch の位置づけ理解が必須になる。

Current Understanding

watch は値を返すための仕組みではなく、変化に反応して何かを起こすための仕組みである。典型例は API 呼び出し、localStorage 同期、タイマー制御、外部ライブラリ連携など、Vue の外側へ影響が出る処理である。

したがって watch は template 表示のための整形ロジックには使わない方がよい。表示用の派生は computed、外部との同期や副作用は watch、という分担が基本になる。

Connections

• Vue Reactivity
• Vue ref
• Vue computed
• Vue で computed と watch はどう使い分けるか
• Watchers - state変化に反応する副作用管理
• Lifecycle Hooks - コンポーネントの時間軸と副作用配置

New Insights

• watch は Vue 内の計算より、Vue 外との接続点として見ると責務が明確になる
• lifecycle と組み合わせると、副作用の開始と破棄の議論につながる

Open Questions

• watchEffect を独立概念として切るべきか
• async watch と cleanup パターンをどこに整理するか