v-once 1 回だけレンダリング

最終更新：2026-10-22

v-once は要素を 1 回だけレンダリングします。以降、依存するデータが変わっても再レンダリングされません。静的コンテンツの最適化に使います。

📝 構文

<p v-once>初期値：{{ msg }}</p>

expression	式なし

戻り値：ディレクティブ。戻り値なし

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

出力：

After clicking, the live paragraph updates while the frozen one keeps the initial text.

ℹ️ 補足 バージョン番号や著作権情報など、決して変化しないコンテンツに適しています。無駄な再レンダリングを減らせます。

⚠️ 注意 データが後で変わっても v-once ノードには反映されません。動的コンテンツに誤用すると表示が古いままになります。

💡 ヒント v-once は要素のサブツリー全体に効果があります。

Q どんなコンテンツに v-once が適していますか？

A 著作権表記やバージョン番号など、初期化後に決して変わらない静的テキストです。

Q データが変わったのにページが更新されないのはなぜですか？

A それが v-once の設計です。そのサブツリーは以降の再レンダリングから外れるため、動的コンテンツに誤用すると古いデータが表示されます。

Q v-for と組み合わせられますか？

A 可能ですが、動的なリストとの併用は通常目的に反します。リストのシナリオでは v-memo を使ってください。

Web-Tutorial 技術チーム

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