Vue v-once Directive

<template>
  <h1>v-once Example</h1>
  <p>The image is only rendered once. Changing the image source does not have any effect.</p>
  <img v-once v-bind:src="imgUrl[imgIndex]">
  <p>Img src: '{{ imgUrl[imgIndex] }}'</p>
  <button v-on:click="changeImg">Change image</button>
</template>

Definition and Usage

The v-once directive is used to only render an element once.

By only rendering an element once, the performance can be enhanced.

When an element has the v-once directive, all its child elements also becomes static after the first render.

How often an element gets rendered can also be limited by the v-memo directive to gain performance.

Related Pages

Vue Reference: Vue v-memo Directive

Vue Tutorial: Vue v-bind Directive

Vue Tutorial: Vue v-on Directive

Vue Tutorial: Vue Methods

Vue Tutorial: Vue Lifecycle Hooks