watchPostEffect() コンポーネント更新後に実行される副作用
最終更新：2026-10-22
watchPostEffect() コンポーネント更新後に実行される副作用
watchPostEffect() は watchEffect に flush: 'post' を付けたものと同等です。コンポーネントの DOM 更新後に実行されるため、更新後の DOM の計測に最適です。
| グループ | リアクティビティ: 基本 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
watchPostEffect(() => {
console.log(el.value.offsetHeight) // DOM は更新済み
})⚙️ 引数
| effect | 副作用関数。オプションは watchEffect と同じ（flush は除く） |
|---|
戻り値：監視を停止する関数 stop()
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Shows the paragraph height; it follows font-size changes.💡 ポイント
💡 ヒント デフォルトの watchEffect は DOM 更新前に実行されるため、offsetHeight などのレイアウト情報を読むと古い値になります。それを解決するための API がこれです。
ℹ️ 補足 watchEffect に { flush: 'post' } を付けても完全に同じ動作になります。
⚠️ 注意 DOM 参照に依存する場合は、ref がマウント済みかを確認してください（初回は null の可能性があります）。
🏷️ 関連基本
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q watchEffect との違いを一言で言うと？
A 実行タイミングです。watchEffect は DOM 更新前、watchPostEffect は DOM 更新後に実行されます。
Q どんなときに必要になりますか？
A レンダリング後に要素のサイズ、スクロール位置、フォーカスなど、最新の DOM に依存する値を読みたいときです。
Q nextTick で代用できますか？
A 1 回きりの読み取りなら await nextTick() で十分です。変化に継続的に追従したい場合は watchPostEffect を使いましょう。
