updated 更新完了（Options API）

最終更新：2026-10-22

updated はデータの変化でコンポーネントが再レンダリングされ、DOM へのパッチが完了した後に呼ばれます。再計測やウィジェットの同期に適しています。

📝 構文

export default {
  updated() {
    // the DOM already reflects the change
  }
}

value	引数なし

戻り値：戻り値なし

以下のコードを編集して結果を確認しましょう：

出力：

The height follows the font-size changes.

⚠️ 注意 ここでレンダリング中のデータを変更しないでください。無限ループになります。

💡 ヒント 特定のデータには watch を優先し、updated は更新ごとの同期に向いています。

ℹ️ 補足 親コンポーネントの updated は、子コンポーネントの更新後にトリガーされます。

Q データを変更すると無限ループになるのはなぜですか？

A フック内の代入が新たな更新をスケジュールし、フックが再び発火するためです。

Q watch との使い分けは？

A watch は特定のデータを対象にします。updated はレンダリングそのものに反応します。

Q ここで最新の DOM は取得できますか？

A 取得できます。これが beforeUpdate に対する利点です。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。