What is v-once used for?
v-once is a Vue directive that makes an element or component render only once, and then never update again, even if the data changes.
In other words:
v-oncemakes part of the template static. Vue renders it once and stops tracking its updates.
A simple example
<p v-once>{{ message }}</p>data() {
return { message: "Hello" }
}If message changes later, the text will not update.
Vue simply ignores the change and keeps the old value.
How it works under the hood
- Vue renders the element on the first pass.
- It marks it as static.
- From then on, it doesn't include it in the reactive system.
- When the virtual DOM updates, this node is skipped.
When is it useful to use v-once?
1. Static content
If part of the template doesn't depend on data:
<h1 v-once>Application name</h1>2. One-time computations
For example, expensive computations during rendering:
<div v-once>{{ expensiveCalculation() }}</div>3. Performance optimization
Vue won't track this part of the template, so there's less work during diffing.
4. A one-time render of a dynamic value
If you need to output a value only on the first render but then ignore changes:
<p v-once>Current date: {{ new Date().toLocaleTimeString() }}</p>It can be used on a component
<UserCard v-once :user="user" />Even if user updates, the component won't re-render.
Using it with template for a group of elements
<template v-once>
<h2>{{ title }}</h2>
<p>{{ description }}</p>
</template>Both nodes become static.
Limitations and important points
- You cannot update an element after
v-once; it's a one-way path. - Use it only where you are certain the value should never change.
- It doesn't replace caching computed properties or memoization.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.