Vue Tip: Avoid Unwanted Re-Renders of an Element Using v-once

Michael Hoffmann
Nov 21, 2021
| 1 min read
| 2209 views
Michael Hoffmann
Nov 21, 2021
1 min read
| 2209 views
Template

The v-once directive is a Vue.js directive used to avoid unwanted re-renders of an element.
It optimizes the update performance by rendering the element and component only once.
Vue will treat the element/component and its children as static content on subsequent re-render.
<p v-once>This text will never change: {{ message }}</p>
If we put the v-once
directive on an element with children, these would also be treated as static content:
1
<section v-once>
2
<h1>My Headline</h1>
3
<p>{{ message }}</p>
4
</section>
Info
Since 3.2, you can also memoize part of the template with invalidation conditions using v-memo
.
If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter:
New Vue & Nuxt tips delivered to your inbox:
Show comments