beforeUpdate 更新前（Options API）
最終更新：2026-10-22
beforeUpdate 更新前（Options API）
beforeUpdate はデータが変化した後、DOM へのパッチが行われる前に呼ばれます。この時点で読み取れるのはまだ前の DOM です。
| グループ | オプション: 描画とライフサイクル |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
beforeUpdate() {
// the DOM still holds the old value
}
}⚙️ 引数
| value | 引数なし |
|---|
戻り値：戻り値なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Each click records the stale DOM first, then the view refreshes.💡 ポイント
ℹ️ 補足 使用頻度は低めです。多くのケースでは flush: 'pre' 付きの watch で足ります。
⚠️ 注意 ここでデータを変更すると追加の更新がスケジュールされるため、注意してください。
🏷️ 関連描画とライフサイクル
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q DOM 更新とどちらが先ですか？
A フックが先に実行され、DOM 更新がその直後に来ます。
Q 更新を中止できますか？
A できません。レンダリングは v-if で制御してください。
Q updated との違いは？
A タイミングが正反対です。ここでは DOM が古く、updated では最新です。
