onUpdated() 更新後フック
最終更新：2026-10-22
onUpdated() 更新後フック
onUpdated() は、リアクティブな変更によってコンポーネントが再レンダリングされ DOM が更新された後に呼ばれます。更新後の DOM サイズの取得やサードパーティライブラリとの同期に向いています。
| グループ | ライフサイクルフック |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
onUpdated(() => {
// DOM は最新の状態になっている
})⚙️ 引数
| callback | 更新後に実行される関数 |
|---|
戻り値：なし
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The height figure follows the font-size changes.💡 ポイント
⚠️ 注意 このフック内で状態を変更してはいけません。再び更新がトリガーされ、無限ループになります。
💡 ヒント 特定のデータの変化を追いたい場合は watch / watchPostEffect を優先してください。このフックは「どの更新後にもやりたい処理」（レイアウトの再計算など）に限定するとよいです。
ℹ️ 補足 親コンポーネントの onUpdated は、その子コンポーネントの更新より後に発火します。
🏷️ 関連ライフサイクルフック
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q ここでデータを変更すると無限ループになるのはなぜですか？
A 変更が新たな更新を引き起こし、フックが再実行されてまた変更される、という流れが繰り返されるためです。
Q nextTick との関係は？
A onUpdated の実行タイミングは「DOM 更新完了後」であり、await nextTick() の後と同じタイミングです。
Q どんなときに必要になりますか？
A あらゆるデータ変化の後に DOM の計測やライブラリとの同期が必要で、依存を個別に列挙できない場合です。
