v-once

The v-once directive renders an element or component only once and skips all future updates. After the initial render, the element (or component) and all of its children are treated as static content and will not be re-rendered, even if reactive data changes.

Note that the v-once directive doesn't expect any value or JavaScript expression.

This directive is useful for optimizing performance when you know a portion of the template will never change.

<!-- single element -->
<span v-once>This will never change: {{msg}}</span>

<!-- the element have children -->
<div v-once>
  <h1>Comment</h1>
  <p>{{msg}}</p>
</div>

<!-- component -->
<MyComponent v-once :comment="msg"></MyComponent>

<!-- `v-for` directive -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>