`v-once`

Renders an element/component once and skips future updates.

Since Vue 3.0 Spec ↗

Syntax

v-once

Returns

directive — Caches the rendered result; treats it as static.

Examples

<script setup lang="ts">
import { ref } from 'vue';
const title = ref('Initial title');
</script>

<template>
  <h1 v-once>{{ title }}</h1>
  <!-- later changes to title will NOT update this h1 -->
</template>

Notes

After the first render Vue treats the element and its children as static and never patches them, even if bound data changes. Use for content that is computed once and never changes, as a performance optimization. For conditional caching of dynamic content prefer v-memo.