onBeforeUpdate() 更新前フック
最終更新：2026-10-22
onBeforeUpdate() 更新前フック
onBeforeUpdate() は、リアクティブなデータが変化した後、DOM が更新される前に呼ばれます。このタイミングでは更新前の DOM の状態を読めます。
| グループ | ライフサイクルフック |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
onBeforeUpdate(() => {
// DOM はまだ古い状態
})⚙️ 引数
| callback | 更新前に実行される関数 |
|---|
戻り値：なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Each click records the stale DOM first, then the view refreshes.💡 ポイント
ℹ️ 補足 使用頻度は低めです。「更新前に読みたい」という需要の大半は watch + watchPostEffect でカバーできます。
⚠️ 注意 ここでデータを変更すると追加の一連の更新が走り、ループになりやすいので、代入には注意してください。
🏷️ 関連ライフサイクルフック
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q このフックと DOM 更新、どちらが先ですか？
A フックが先です。その直後に DOM 更新が行われるため、ここで読めるのは古い DOM です。
Q ここで更新を阻止できますか？
A できません。Vue にはキャンセルの仕組みがありません。条件付き描画には v-if を使ってください。
Q watch の flush: 'pre' とは何が違いますか？
A タイミングは同じ（DOM 更新前）ですが、watch は特定のデータを監視して新旧の値を受け取れます。このフックには引数がありません。
