Suggest an editImprove this articleRefine the answer for “What is v-once used for?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`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. **Key point:** `v-once` makes part of the template static - Vue renders it once and stops tracking its updates.Shown above the full answer for quick recall.Answer (EN)Image`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-once` **makes part of the template static. Vue renders it once and stops tracking its updates.** --- ## A simple example ```html <p v-once>{{ message }}</p> ``` ```js 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: ```html <h1 v-once>Application name</h1> ``` ### 2. **One-time computations** For example, expensive computations during rendering: ```html <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: ```html <p v-once>Current date: {{ new Date().toLocaleTimeString() }}</p> ``` --- ## It can be used on a component ```html <UserCard v-once :user="user" /> ``` Even if `user` updates, the component won't re-render. --- ## Using it with `template` for a group of elements ```html <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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.