Mokkapps Logo

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

11/21/2021

cover

The v-once directive is a Vue.js directive that is used to avoid unwanted re-renders of an element.

It optimizes the update performance as it renders the element and component only once.

Vue will treat the element/component and all its children as static content on any 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>

Since 3.2, you can also memoize part of the template with invalidation conditions using v-memo.



If you liked this 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.

Du hast einen Fehler in diesem Artikel gefunden? Du möchtest gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github
Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)

Michael Hoffmann

Senior Frontend Developer (Freelancer) aus München mit Fokus auf Vue.js