Mokkapps Logo

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

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
November 21, 2021
1 Minuten Lesezeit
- Ansichten

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>

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.

Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten 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