v-once Render Once
Last updated: 2026-10-22
v-once Render Once
v-once renders the element only once; later changes to its data do not re-render it — a micro-optimisation for static content.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<p v-once>Initial: {{ msg }}</p>⚙️ Arguments
| expression | No expression |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
After clicking, the live paragraph updates while the frozen one keeps the initial text.💡 Key Points
ℹ️ Note Ideal for version numbers, copyright lines and other never-changing content.
⚠️ Warning Later data changes never reach a v-once node — misuse on dynamic content causes stale output.
💡 Tip v-once covers the entire subtree of the element.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What content suits v-once?
A Static text that never changes after mount, such as copyright or version lines.
Q Why does the page not update when data changes?
A By design that subtree leaves the render pipeline — misuse shows stale data.
Q Can it combine with v-for?
A It can, but for dynamic lists v-memo is the right tool.
