Javascript is required
Mokkapps Logo

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

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Nov 21, 2021
1 min read
|
93 views
Template
Avoid Unwanted Re-Renders of an Element Using v-once Image

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:

<section v-once>  <h1>My Headline</h1>  <p>{{ message }}</p></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 content from me. Alternatively (or additionally), you can also subscribe to my newsletter.