Optimizing with v-once

Snippet

Optimizing with v-once

The v-once directive tells Vue to render the element and its children only once. After the initial render, Vue skips updates for this specific tree, which can improve performance for truly static content.

snippet.js
javascript
<template>
  <div v-once>
    <h1>{{ staticTitle }}</h1>
    <p>This will never re-render, even if staticTitle changes.</p>
  </div>
</template>

vue

Breakdown

v-once

A directive used to mark content that should be treated as static after the first render.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Optimizing with v-once

Related