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

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 X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Destructure in v-for

It is possible to use ES6 destructuring in a v-for in Vue

Vue Tip: Use Multiple v-model Bindings

Sometimes Vue.js components need to have multiple v-model bindings.