v-once for static content in Vue - Step-by-Step Execution

Concept Flow - v-once for static content

Vue Template with v-once

↓

Render element once

↓

Insert static DOM

↓

Skip future updates

↓

Static content remains unchanged

The v-once directive tells Vue to render the element and its children only once, skipping future updates for better performance on static content.

Execution Sample

Vue

<template>
  <div>
    <p v-once>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello!')
setTimeout(() => { message.value = 'Changed!' }, 2000)
</script>

This Vue component renders a paragraph with v-once, so even when the message changes after 2 seconds, the paragraph text stays the same.

Execution Table

Step	Action	message value	Rendered Output	Update Triggered?	DOM Change
1	Initial render	'Hello!'	<p>Hello!</p>	Yes	DOM created with 'Hello!'
2	After 2 seconds, message changes to 'Changed!'	'Changed!'	<p>Hello!</p>	Yes	No DOM update due to v-once
3	No further changes	'Changed!'	<p>Hello!</p>	No	DOM remains unchanged

💡 v-once prevents DOM updates after initial render, so static content stays unchanged even if data changes

Variable Tracker

Variable	Start	After 1	After 2	Final
message.value	'Hello!'	'Hello!'	'Changed!'	'Changed!'

Key Moments - 2 Insights

Why does the paragraph text not change even though the message variable updates?

Because v-once renders the element only once and skips future updates, so the DOM does not reflect changes in message.value after the first render (see execution_table step 2).

Does v-once stop the data from changing?

No, the data variable message.value changes normally, but v-once prevents Vue from updating the DOM for that element (see variable_tracker vs execution_table).

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output at step 2 after message changes?

A <p>Changed!</p>

B <p>Hello!</p>

C <p></p>

D No paragraph rendered

💡 Hint

Check the 'Rendered Output' column at step 2 in the execution_table

At which step does the message variable change its value?

A Step 1

B Step 3

C Step 2

D Never

💡 Hint

Look at the 'message value' column in the variable_tracker and execution_table

If we remove v-once, what would happen at step 2?

A The paragraph text updates to 'Changed!'

B The paragraph text stays 'Hello!'

C The paragraph disappears

D An error occurs

💡 Hint

v-once controls DOM updates; without it, Vue updates DOM when data changes

Concept Snapshot

v-once directive in Vue:
- Use v-once on an element to render it only once.
- Vue skips future updates for that element and its children.
- Useful for static content to improve performance.
- Data can change but DOM stays the same.
- Syntax: <element v-once>...</element>

Full Transcript

The v-once directive in Vue tells the framework to render the element and its children only once. This means Vue creates the DOM for that element initially but skips any future updates even if the underlying data changes. In the example, a paragraph displays a message with v-once. When the message changes after 2 seconds, the paragraph text does not update because v-once prevents DOM updates. The data variable changes normally, but the DOM remains static. This is useful for static content that does not need to change, improving performance by avoiding unnecessary DOM updates.