Vue v-once Directive
Example
Using the v-once directive to render an <img> element only once.
<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